Vue入门 - 组件通信

1 父子组件构建顺序

1. 先触发子组件的mounted钩子，再触发父组件的mounted钩子。

---

2 父组件向子组件传递数据(prop)

1. 在父组件的模版中对子组件标签进行属性绑定
   
   • <child message="hello"></child>
2. 在子组件中使用props属性显式地接收
   
   • props: ['message']，然后即可使用this.message使用。
3. 若需要动态绑定属性，则需使用v-bind，或简写:message="hello"
4. 使用字面量语法child message="1"，此时绑定的是字符串”1”，若想绑定数值，需使用v-bind，让它的值被当作js表达式计算。
5. props的值是单项流动的，并不会从子组件返回父组件。
6. 不应在子组件内改变props的值，若需要，则需在子组件内定义一个局部变量，并用prop初始化它，或使用计算属性。

---

2.1 Prop验证

1. 可以为组件的props指定验证规则，若传入的数据不符合规则，vue会发出警告。
2. 要指定验证规格，需要用对象的形式，而不能用字符串数组
3. 若prop验证失败，则在开发版本中抛出警告

//...
props: {
    propA: null,               //任何类型都可以
    propB: Number,             //数字类型
    propC: [String, Number]    //多种类型，字符串或数值都可
    propD: {                   //字符串类型，且必须传。
        type: String,
        required: true
    },
    propE: {
        type: Number,          //数字类型，且有默认值
        default: 100
    },
    propF: {                   //数组/对象的默认值应由工厂函数返回。
        type: Object,
        default: function(){
            return { message: 'Hello' }
        }
    },
    propE: {                   //自定义验证规则。
        validator: function(value){
            return value > 10 
        }
    }
}

type 可以是下面原生构造器：
1. String
2. Number
3. Boolean
4. Function
5. Object
6. Array
也可以是一个自定义构造器函数，使用 instanceof 检测。

---

3 子组件向父组件传递数据(自定义事件)

1. 子组件通过自定义事件将数据传递给父组件。
2. 子组件中调用this.$emit('funcName',data)。
3. 父组件使用v-on监听自定义事件<child @funcName='sayHello'></child>，子组件触发this.$emit时会自动触发。
4. 若想给某元素监听原生事件，可使用.native修饰符。<child @click.native="sayHello"></child>

参考代码：

//parent component
<template>
    <div v-on:childready="doSomthing">
</template>
<script>
//...
methods:{
    doSomthing:function(childVm){
        //...
    }
}
</script>

//child component
//...
    this.$emit('childready',this);
//...

---

4 使用自定义事件的表单输入组件

1. 自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。
   
   • <input v-model="something">
2. 要让组件的 v-model 生效，它必须：
   
   • 接收一个 value 属性props:['value']
   • 在有新的 value 时触发 input 事件。this.$emit('input',data)

例子：

//parent
<child-form v-model="name"></child-form>

//child
<template>
  <input ref="input" :value="value" @input="updateValue">
</template>

<script>
export default {
    name: "form",
    props: ['value'],
    methods:{
        updateValue:function(){
            //获取节点
            //var el = this.$refs.input;
            this.$emit('input', this.value);
        }
    }
}
</script>

---

5 非父子组件通信