组件之前的调用:Components
new Vue({
data: { isShow: true },
components: [Header, Footer]
})
vuejs组件之间的通讯
父组件向子组件中传递数据:props
//父:
<header msg='something interesting'></header>
//子:
new Vue({
data: {
userName: 'xxx'
},
//要与父组件传递过来的变量名一致
props: ['msg'],
methods: {
doThis: function() {
console.log(this.msg)
}
}
});
子组件向父组件传递信息:
方式一: 父 on()绑定,子 o n ( ) 绑 定 , 子 emit()向父发送信息
//父:
<template>
<p>Child tells me: {{childWords}}</p>
//注意,组件注册时首字母要大写,但引用时大写字母要使用'-小写字母'
<component-a msgFormFater='youdie!' v-on:child-tell-me-something='ListenToMyBoy'></component-a>
</template>
<script>
import ComponentA from './componentA'
export default {
data: function() {
return {
childWords: ''
}
},
components: {ComponentA},
methods: {
ListenToMyBoy: function(msg) {
console.log(msg);
this.childWords = msg;
}
}
}
</script>
//子componentA.vue:
<template>
<div class='hello'>
<h1>{{msg}}</h1>
<button v-on:click='onclickMe'>Click!</button>
</div>
</template>
<script>
export default {
data: function() {
return {
msg: 'hello from component a!',
}
},
//子接受父的信息
props: ['msgFormFater'],
methods: {
onClickMe: function() {
console.log(this.msgFormFater)
//子组件向父组件传递信息this.$emit('事件名‘, 信息)
this.$emit('child-tell-me-something', this.msg)
}
}
}
</script>
方式二: dispatch()子组件向上派发事件, d i s p a t c h ( ) 子 组 件 向 上 派 发 事 件 , broadcast():从外往里派发事件
//父:
<template>
<p>Child tells me: {{childWords}}</p>
//注意,组件注册时首字母要大写,但引用时大写字母要使用'-小写字母'
<component-a msgFormFater='youdie!' v-on:child-tell-me-something='ListenToMyBoy'></component-a>
</template>
<script>
import ComponentA from './componentA'
export default {
data: function() {
return {
childWords: ''
}
},
components: {ComponentA},
//子组件使用$dispatch()传递消息,父组件要使用events来注册事件,并处理消息
events: {
'child-tell-me-something': function(msg) {
this.childWords = msg;
}
},
methods: {
ListenToMyBoy: function(msg) {
console.log(msg);
this.childWords = msg;
}
}
}
</script>
//子componentA.vue:
<template>
<div class='hello'>
<h1>{{msg}}</h1>
<button v-on:click='onclickMe'>Click!</button>
</div>
</template>
<script>
export default {
data: function() {
return {
msg: 'hello from component a!',
}
},
//子接受父的信息
props: ['msgFormFater'],
methods: {
onClickMe: function() {
console.log(this.msgFormFater)
//子组件向父组件传递信息this.$emit('事件名‘, 信息)
this.$dispatch('child-tell-me-something', this.msg)
}
}
}
</script>
//父:
<template>
<p>Child tells me: {{childWords}}</p>
//注意,组件注册时首字母要大写,但引用时大写字母要使用'-小写字母'
<component-a v-on:child-tell-me-something='ListenToMyBoy'></component-a>
</template>
<script>
import ComponentA from './componentA'
export default {
data: function() {
return {
childWords: ''
}
},
components: {ComponentA},
methods: {
addNew: function() {
//父组件向子组件传递信息
this.$broadcast('onAddNew', 'abc');
}
},
//子组件使用$dispatch()传递消息,父组件要使用events来注册事件,并处理消息
events: {
'child-tell-me-something': function(msg) {
this.childWords = msg;
}
},
methods: {
ListenToMyBoy: function(msg) {
console.log(msg);
this.childWords = msg;
}
}
}
</script>
//子componentA.vue:
<template>
<div class='hello'>
<h1>{{msg}}</h1>
<button v-on:click='onclickMe'>Click!</button>
</div>
</template>
<script>
export default {
data: function() {
return {
msg: 'hello from component a!',
}
},
//子接受父使用$broadcast传递的信息,要在events注册事件并处理接受的数据
events: {
'onAddNew': function(item) {
console.log(item)
}
},
methods: {
onClickMe: function() {
console.log(this.msgFormFater)
//子组件向父组件传递信息this.$emit('事件名‘, 信息)
this.$dispatch('child-tell-me-something', this.msg)
}
}
}
</script>