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.profileps：$表示refs为vue对象，而不是普通的js对象。
2、props：父组件向子组件传值（数据），驼峰式改为横线式。
Vue.component( 'child', {
// 声明 props
props: [ 'message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>{ { message }}</span>'
})
3、scope 作用域
在父级中，具有特殊属性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象：
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{ { props.text }}</span>
</template>
</child>
</div>
4、is 用于动态组件并且给予DOM内模板到限制来工作
动态组件：
由于table、ul、ol等标签内无法插入自定义标签，只能插入特定标签，所以使用is属性带入。通过使用保留的
<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> |
5.slot分发内容
不具名slot用来备用插入，子组件只有不具名的slot时候，父组件才回调用slot内容，如果子组件有其他内容，父组件的内容会替换掉slot内容，slot内容不显示。
| 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> |
6、sync 字符修饰符
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定的值。
是一个会被扩展为一个自动更新父组件属性的
v-on 侦听器。 如<comp :foo.sync="bar"></comp>会被拓展为：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新
foo 的值时，它需要显式地触发一个更新事件： this.$emit('update:foo', newValue)