VUE-props-自定义事件

一、props

组件间通信：通过标签属性
子组件在接收父组件传递过来的值，需要声明接收属性，这个属性会成为子组件对象的属性。

在父组件定义MyComponent时：
<my-component name='tom' :age='3' :set-name='setName'></my-component>

1.在子组件内声明接收属性

// 方式一：只指定名称
props: ['name', 'age', 'setName']
// 方式二：指定名称和类型
props: {
    name: String,
    age: Number,
    setNmae: Function
}
// 方式三：指定名称/类型/必要性/默认值
props: {
    name: {type: String, required: true, default:xxx},
}

注意：
（1）此方式用于父组件向子组件传递数据

（2）所有标签属性都会成为组件对象的属性，模板页面可以直接引用

（3）问题:
a. 如果需要向非子后代传递数据必须多层逐层传递
b. 兄弟组件间也不能直接 props 通信，必须借助父组件才可以

二、自定义事件

 <button @click="addContent">添加</button>  

数据在哪个组件，更新数据的行为（方法）就应定义在哪个组件。
当前数据在App组件中：

App.vue在定义addComments添加
methods: {
        addComments(comment){
            this.comments.unshift(comment);
        },

在子组件中调用父组件的方法：
（1）传递数据：标签数据addComments会成为Add组件对象的属性，可以直接调用

<Add :addComments="addComments"/>

（2）Add组件声明接收属性

props:{
  addComments:{
      type:Function,
      required:true
  }
 }

（3）调用该属性

 this.addComments(comment);

注意：
a：此方法用于子组件向父组件发送消息（数据）