父子组件通信：关于 props down,enents up

一. 父组件中注册子组件

1. 全局注册

<div id="example">
  <my-component></my-component>
</div>

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

2. 局部注册

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

通过import引入子组件

<template>
    <blacked-list 
        :parentsData="data"
        :foo.sync="bar"
        @toParents="fromChild">
    </blacked-list>
</template>
<script>
import BlackedList from './BlackedList.vue'
export default {
    components: {
        BlackedList
    },
    data:(){
        return{
            data:'f',
            bar: 'bar'
        }
    },
    methods:{
        fromChild(data){}
    }
}
</script>

//子组件
<template>
    <p>{{parentsData}}</p>
    <div @click="$emit('toParents',para)"></div>
    <div @click="$emit('update:foo','#')"></div>
</template>
export default {
    props:['parentsData'],
    data(){
        return{
            para: 'v',
            foo: ''
        }
    }
}

命名，

在声明和注册组件时建议使用CamelCase(驼峰式命名),
比如上面的BlackedList
而在使用组件时，应该使用对应的kebab-case(短横线分隔式命名)
<blacked-list></blacked-list>

父组件向子组件传值 props down

子组件的props属性为一个数组，接收父组件通过v-bind传递的值
子组件：

props:['parentsData']

父组件

<blacked-list :parentsData="data"></blacked-list>
data(){
    return{
        data: ''
    }
}

子组件通知父组件 events up

子组件通过$emit触发自定义事件向父组件发送通知
this.$emit('事件名',传递的值)

<div @click="$emit('toParents',para)"></div>

父组件通过v-on绑定子组件$emit的事件名，并通过事件来接收子组件传递的值

<blacked-list @toParents="fromChild"></blacked-list>
methods:{
    fromChild(data){
      //此处data为上面子组件$emit第二个参数中传递的值
    }
}

.sync修饰符

不允许在子组件中直接修改父组件的值

由于子组件改变 prop 的代码和普通的状态改动代码毫无区别，当光看子组件的代码时，你完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本。

从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

<blacked-list :foo.sync="bar"></blacked-list>

会被扩展为

<blacked-list:foo="bar" @update:foo="val => bar = val"></blacked-list>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

当props为对象或数组时

在修改（不是替换）对象或数组时，旧值将与新值相同，因为它们索引同一个对象/数组。Vue 不会保留修改之前值的副本。