Vue组件通信props和$emit用法

父传子，通过props
子传父，通过$emit

App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->

    <!-- 添加属性传值 -->
     <!-- @监听数据changeTitle，当监听到子组件向父组件通过$emit传入了changeTitle这个参数时，触发handlechange函数 -->
    <Son :dodemoi="myTitle" @changeTitle="handlechange"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue"
export default {
  name: "App",
  components: {
    Son,
  },
  data() {
    return {
      myTitle: "前端",
    }
  },
  methods:{
    handlechange(title){
      this.myTitle = title;
    }
  }
}
</script>

<style>
</style>

Son.vue

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    <!-- 3.直接使用props的值 -->
    {{dodemoi}}

    <button @click = "changeFn">修改</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接受
  props:['dodemoi'],
  methods:{
    changeFn(){
      //通过$emit，发送通知
      //左边是参数名称，右边是参数值
      this.$emit('changeTitle', '已修改');
    }
  }
  
}
</script>
<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

效果

鼠标点击修改，页面会显示已经修改。

鼠标点击后：