Vue组件之间的通讯方式（父传子、子传父、兄弟组件间传值、非父子组件间传值）

Vue组件之间的通讯方式（父传子、子传父、兄弟组件间传值）

*引子

1. 首先，我们初步建立一个以vue/cli4为基础的项目；
2. 在components的文件夹下新建Parent.vue和ChildOne的父组件和子组件；
3. 在App.vue和Parent.vue中映射成组件标签。

基本结构如下：
Parent.vue

<template>
    <div>
    	<h1>Parent</h1>
        <child-one></child-one>
    </div>
</template>

<script>
import ChildOne from '@/components/ChildOne'
export default {
   
    data () {
   
        return {
   
            
        }
    },
    components:{
   
        ChildOne
    }
}
</script>

ChildOne.vue

<template>
    <div>
        <h1>ChildOne</h1>
    </div>
</template>

<script>
export default {
   
};
</script>

一、父传子

• Props属性传递
  父组件通过自定义属性给子组件传值，子组件用props接收

代码如下

Parent.vue

//template
<div>
	<h1>Parent</h1>
	<child-one :msgToChild="msg"></child-one>
</div>

//script  
data () {
   
	return {
   
		msg:'i am you father'
    }
},

ChildOne.vue

//template 
<div>
	<h1>ChildOne</h1>
	<div>接收到父亲传来的消息:{
   {
   msgToChild}}</div>
</div>

//script
export default {
   
    //第一种写法
    // props:['msgToChild']
    //第二种写法
     props: {
   
            msgToChild: {
   
                type: String,
            }
     }
};

• 方法传递
  通过组件标签进行方法的传递，子组件$emit触发方法

Parent.vue

//template 
<!--进行方法的传递-->
<child-one @methodToChild="showMsg"></child-one>

//script   
methods:{
   
	/*定义方法*/
	showMsg () {
   
		alert('i am your father')
	}
},

ChildOne.vue

//tempalte
    <div>接收到父亲传来的消息:{
   {
   msgToChild}}</div>
    <!--定义一个按钮用来触发方法-->
    <button @click="needFatherMethod"