Vue的组件传值方式(重点)

内容提要：

1. 父传子(`props`)
2. 子传父(点击事件+$emit)
3. 同级组件互传（$on+$emit）
4. 跨组件互传	($attrs)

1. vimport 快速导入组件

import Parent from '@/views/Parent.vue';
@ 表示 src路径

2. 引入组件后

一定要注册 ，然后使用组件
components: {   //注册组件
	Parent
},	
//使用组件（首字母可小写）
<Parent></Parent>

3. 父传值到子组件 步骤

3.1 在父组件引入子组件
3.2 在父组件使用 v-bind绑定数据到 子组件
3.3 在子组件使用 props接收

Parent.vue ===========================
<child :msg="msg"></child>

Child.vue ============================
props: {
     msg: {
         type: String, // 传递的数据类型
         default: ''
     },
 },

4. 子组件传值到父组件 步骤

4.1 在子组件创建点击事件
<!-- 通过 事件方式传值到 父组件 -->

<button @click="sendToParent">发送数据到父组件</button>

4.2 子组件数据的准备 
data() {
  return {
    str: "子组件传值到父组件。。。"
  }
},

methods: {
  sendToParent() {
    this.$emit('show',this.str)  //调用 数据源的key 
  }
},	

 4.3 父组件接收数据
 <child v-bind:msg="msg" @show="getData"></child>
 
 这里的 @show就是 4.2中子组件的$emit中的参数1的 事件名称
 
 getData是父组件为取出子组件数据，自定义的一个函数名（任意取名）	

接收代码的实现 
data() {
  return {
    msg: '来自父组件的数据。。。。',
    abc:''
  }
},

methods: {
  getData(val) {  //这里的val是 this.$emit('show',this.str)  这里的 this.str
    this.abc = val  //将 接收的 val赋值给 abc
  }
},

5. 使用事件消息传递 数据（非父子 app-parent）

5.1 创建公共 js
import Vue  from  'vue'
export default new Vue;

//暴露 vue对象 让其他组件使用

5.2 分别在 需要传值的 2个组件引入js

App.vue ============================================

import bus from './utils/bus'
	methods: {
	sendData() {
	  bus.$emit('message','APP中的数据。。。。')
	}
  },

Parent.vue ==========================================

import bus from './utils/bus'

 //在生命周期函数中接收 
created () {
  bus.$on('message',val=>{
    this.message = val
  });
},

6. 使用$attrs 传值（非父子–多层传值 app-parent-child）

App.vue===============================================
	
	data() {
	   return {
			a:'111',
			b:'222'
	   }
	 },

	<Parent  :msga="a" :msgb="b"></Parent>


Parent.vue=============================================

<Child v-bind="$attrs"></Child>

Child.vue==============================================

//使用生命周期函数 
mounted () {
  console.log('attrs',this.$attrs)
},

详细代码：
App.vue

<template>
  <div id="app">
    <parent :messagea="a" :messageb="b"></parent>
    <button @click="sendData">发送数据到Parent</button>
  </div>
</template>

<script>
import Parent from '@/views/Parent'
import bus from '../utils/bus'
export default {
  name: 'App',
  components: {
    Parent    
  },
  methods: {
    sendData() {
      bus.$emit("message",this.message)
    }
  },
  data() {
    return {
      message: "传递给Parent的值。。。",
      a:"a",
      b:"b"
    }
  }
}
</script>
<style>
*{
  margin: 20px auto;
  padding: 0;
  list-style: none;
  background-color: #ccc;
  text-align: center;
}
</style>

Parent.vue

<template>
  <div>
    <h3>我是父组件</h3>
    <h5>{{abc}}   -----  {{message}}</h5>
    <child :msg="msg" @show="getData" v-bind="$attrs"></child>    
  </div>
</template>

<script>
import Child from "@/views/Child";
import bus from '../../utils/bus'
export default {
  components: { Child },
  data() {
    return {
      msg: "来自父组件的数据",
      abc: "",
      message:""
    };
  },
  methods: {
    getData(val) {
      this.abc = val;
    }    
  },
  mounted () {
    bus.$on("message",val=>{
      // console.log(val);
      this.message=val
    });
  },
};
</script>

Child.vue

<template>
    <div>
        <hr>
        <h4>我是子组件</h4>
        {{msg}}
        <ul>
            <li>{{$attrs.messagea}}</li> 
            <li>{{$attrs.messageb}}</li> 
        </ul>
        <button @click="sendToParent">传值到父组件</button>
        <hr>
    </div>
</template>

<script>
    export default {
        methods: {
            sendToParent() {
                this.$emit("show",this.str)
            }
        },
        data() {
            return {
                str: "子组件正在给父组件传值，哈哈哈！"
            }
        },
        props: {
            msg: {
                type: String,
                default: ''
            },
        },
        mounted () {
            console.log("attrs",this.$attrs);            
        },
    }
</script>

bus.js(放入新建utils工具包里)

import Vue from 'vue'
export default new Vue

结果参考：