一、组件之间的通信
父组件向子组件传递
- props
-
this.$parents
应急方法(包括$children)
子组件向父组件传递
-
$emit
和$on
自定义事件
<div id="message-event-example" class="demo">
<p v-for="msg in messages">{{ msg }}</p>
<button-message v-on:message="handleMessage"></button-message>
</div>
Vue.component('button-message', {
template: `<div>
<input type="text" v-model="message" />
<button v-on:click="handleSendMessage">Send</button>
</div>`,
data: function () {
return {
message: 'test message'
}
},
methods: {
handleSendMessage: function () {
this.$emit('message', { message: this.message })
}
}
})
new Vue({
el: '#message-event-example',
data: {
messages: []
},
methods: {
handleMessage: function (payload) {
this.messages.push(payload.message)
}
}
})
- ref
ref在普通DOM上使用,引用指向的就是DOM元素,如果是组件,就是组件实例
非父子组件通信
通过eventBus
官方的例子
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
二、双向绑定
.sync语法糖
v-model
v-model
实际上是v-bind
和v-on
的语法糖,当使用v-model
时,默认为
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
因此,v-model
也可用用于父子组件,通过自定义v-model
,修改相应的值和方法
model: {
prop: 'checked',
event: 'change'
},
<my-checkbox v-model="foo" value="some value"></my-checkbox>
等价于
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
传递对象
父组件
<template>
<div class="hello">
<h1>{{ data.text }}</h1>
<child :obj="data"></child>
</div>
</template>
<script>
import Child from './Child'
export default {
name: 'HelloWorld',
components: {
Child
},
data () {
return {
data: {
text: 'this is parent'
},
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
子组件
<template>
<div class="child">
{{ obj.text }}
<button @click="add">change</button>
</div>
</template>
<script>
export default {
props: {
obj: Object
},
methods: {
add () {
this.obj.text = 'this is child'
}
}
}
</script>
点击change按钮,父子组件都变成了子组件的text
当然,也可以在父组件上加一个按钮,改变这个data