1、ref ：为子组件指定一个索引 ID，给元素或者组件注册引用信息。refs是一个对象，包含所有的ref组件。
<div id="parent">
<user-profile ref="profile"></user-profile>（子组件）
</div>
var parent = new Vue({ el: ‘#parent‘ })
// 访问子组件
var child = parent.$refs.profile
ps：$表示refs为vue对象，而不是普通的js对象。
2、props：父组件向子组件传值（数据），驼峰式改为横线式。
3、scope 作用域
在父级中，具有特殊属性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象：
<component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换：|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var vm = new Vue({ el: ‘#example‘, data: { currentView: ‘home‘ }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } }})<component v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变！ --></component> |
my-row是自定义组件
|
1
2
3
|
<table> <tr is="my-row"></tr></table> |
|
1
2
3
4
5
6
|
<div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot></div> |
|
1
2
3
4
5
6
7
8
|
父组件模版：<div> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </my-component></div> |
|
1
2
3
4
5
6
7
8
9
|
渲染结果：<div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </div></div> |
v-on 侦听器。foo 的值时，它需要显式地触发一个更新事件：this.$emit(‘update:foo‘, newValue)vue学习：props，scope，slot，ref，is，slot，sync等知识点
原文：https://www.cnblogs.com/navysummer/p/8991541.html