vue使用笔记——父子、兄弟组件之间的传值，以及$emit的奇怪用法

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

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