vue使用笔记——父子、兄弟组件之间的传值
1、父组件向子组件传值
通过props属性进行传值
<div id="emit-example-simple">
<welcome-button btnname="Click me to be welcomed"></welcome-button>
</div>
// 1.父组件通过自定义属性向子组件传值。子组件通过props接收对应属性。
Vue.component('welcome-button', {
props:[
'btnname'
],
template: `
<button v-on:click="$emit('welcome')">
{{btnname}}
</button>
`
})
new Vue({
el: '#emit-example-simple',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})
2、子组件向父组件传值
子组件向父组件使用$emit自定义事件传值
<div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
// 2.子组件触发一个事件的同时,返回一个自定义事件,父组件通过自定义组件名进行调用
// 创建一个组件备调用,发现组件要在vue实例之前创建,不然不奏效
Vue.component('welcome-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>
`
})
new Vue({
el: '#emit-example-simple',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})
3、兄弟组件之间传值
兄弟组件之间可以通过bus总线进行传值。
3.1、Bus使用方案一let Bus = new Vue();创建一个Bus实例
<div id="app">
<b1></b1><br/>
<b2></b2><br/>
</div>
//Bus使用方案一
let Bus = new Vue();
Vue.component('b1', {
created:function(){
Bus.$on("brother2",(value) => {
console.log('bus1',value)
})
},
methods: {
bus1(){
Bus.$emit('brother1','from b1')
}
},
template: `
<button @click="bus1">
component1
</button>
`
})
Vue.component('b2', {
created:function(){
Bus.$on("brother1",(value) => {
console.log('bus2',value)
})
},
methods: {
bus2(){
Bus.$emit('brother2','from b2')
}
},
template: `
<button @click="bus2">
component2
</button>
`
})
// 创建vue实例调用组件
const app = new Vue({
el:'#app',
})
3.2、Bus使用方案二,在根组件的data引入Bus,然后,子组件用this. r o o t . B u s . root.Bus. root.Bus.emit/$on调用
Vue.component('b1', {
created:function(){
this.$root.Bus.$on("root2",(value) => {
console.log('bus root1',value)
})
},
methods: {
bus1(){
this.$root.Bus.$emit('root1','from b1 root!')
}
},
template: `
<button @click="bus1">
component1
</button>
`
})
Vue.component('b2', {
created:function(){
this.$root.Bus.$on("root1",(value) => {
console.log('bus root2',value)
})
},
methods: {
bus2(){
this.$root.Bus.$emit('root2','from b2 root!')
}
},
template: `
<button @click="bus2">
component2
</button>
`
})
// 创建vue实例调用组件
const app = new Vue({
el:'#app',
data(){
return{
//Bus使用方案二,子组件用this.$root.Bus.$emit/$on调用
Bus
}
},
})
4、使用$emit奇怪用法
看官方文档$emit在绑定中使用的时候就返回一个自定义事件名,就在想能不能同时返回点别的。然后,就瞎搞了以下代码试了试。
Vue.component('welcome-button', {
props:[
'btnname'
],
data: function () {
return {
possibleAdvice: ['Yes', 'No', 'Maybe']
}
},
methods: {
giveAdvice: function () {
var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
}
},
template: `
<button @click="$emit('welcome',giveAdvice)">
{{btnname}}
</button>
`
})
// 创建vue实例调用组件
const app = new Vue({
el:'#app',
data(){
return{
//Bus使用方案二,子组件用this.$root.Bus.$emit/$on调用
Bus
}
},
methods:{
welcome(e){
console.log(e)
e()
alert('welcom alert')
},
showAdvice: function (advice) {
alert(advice)
}
}
})