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.$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) } } })

大家一起进步，文章有啥疑问可以问，尽量回答。若发现什么问题也麻烦大牛们指出，谢谢。