vue 组件通信的几种方法

父传子的通信  变量传参

//  父组件
<HelloWorld msg="Welcome to Your Vue.js App"/>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },

//  子组件


 {{msg}}

 props: {
    msg: String,
  },

子传父的通信  函数传参

通过函数传参方法修改父组件msgData的变量值

//  父组件
<HelloWorld :msg="msgData" :btnfn="Fcfn" />
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
      msgData: 'Welcome to Your Vue.js App'
    }
  },
   methods:{
    Fcfn(m){
      this.msgData = m
    }
   }

//  子组件

<template>
    <div>
        {{msg}}
         <button @click="btnfn('你好')">子传父通信</button>
    </div>
</template>
 

 props: {
    msg: String,
    btnfn: Function
  },

子传父的通信  $emit（事件发射方法）

//  父组件
<HelloWorld :msg="msgData" @newName="getMsg" />
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
      msgData: 'Welcome to Your Vue.js App'
    }
  },
   methods:{
    getMsg(e) {
      this.msgData = e
    }
   }

//  子组件

<template>
    <div>
        {{msg}}
         <button @click="doClick">子传父通信</button>
    </div>
</template>
 

 props: {
    msg: String,
    btnfn: Function
  },
methods:{
    doClick(){
      this.$emit('newName', 'hello,js')
    }
}