Vue入门 - 组件通信

1 父子组件构建顺序

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

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

在父组件的模版中对子组件标签进行属性绑定

<child message="hello"></child>

在子组件中使用props属性显式地接收

props: ['message']

，然后即可使用this.message使用。

若需要动态绑定属性，则需使用v-bind，或简写

:message="hello"

使用字面量语法

child message="1"

，此时绑定的是字符串”1”，若想绑定数值，需使用v-bind，让它的值被当作js表达式计算。

props的值是单项流动的，并不会从子组件返回父组件。

不应在子组件内改变props的值，若需要，则需在子组件内定义一个局部变量，并用prop初始化它，或使用计算属性。

2.1 Prop验证

可以为组件的props指定验证规则，若传入的数据不符合规则，vue会发出警告。

要指定验证规格，需要用对象的形式，而不能用字符串数组

若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 子组件向父组件传递数据(自定义事件)

子组件通过自定义事件将数据传递给父组件。

子组件中调用

this.$emit('funcName',data)

。

父组件使用v-on监听自定义事件

<child @funcName='sayHello'></child>

，子组件触发this.$emit时会自动触发。

若想给某元素监听原生事件，可使用.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 使用自定义事件的表单输入组件

自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。

<input v-model="something">

要让组件的 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 非父子组件通信