vue子组件修改父组件的值

父组件可以使用 props 把数据传给子组件。
子组件可以使用 $emit改变父组件的值 。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn； 

父组件：

<template>
  <div>
    <p>{{name}}</p>
    <button type="primary" size="mini" @click="submit">提交</button>
    <!--子组件-->
    <children
      ref="ref"
      :sendMsg="content"
      @getValue="getSonVal"
    ></children>
  </div>
</template>
<script>
  import children from "./components/children.vue"; //引入子组件
  export default {
    components:{
      children,
    },
    data() {
      return {
        name: "张三",
        content:'我是从父组件传过来的',
      }
    },
    methods: {
      getSonVal(val) {
        this.name = val;//将子组件传过来的值赋值给name
      },
      submit() {
        this.$refs.ref.showName();
      },
    }
  }
</script>

子组件：

<template>
  <div class="box">
    <p>{{sendMsg}}</p>
    <button type="primary" size="mini" @click="showName()">刷新</button>
  </div>
</template>
<script>
  export default {
    props:['sendMsg'],
    data() {
      return {
        name: "李四",
      }
    },
    methods: {
      showName() {
        this.$emit('getValue', this.name)
        alert('我是子组件的方法')
      }
    }
  }
</script>