自定义事件子组件修改父组件的值

最近在项目中遇到一个需要在子组件里改变父组件data中的值要求

首先得确定父子关系，父组件为A.vue，子组件为B.vue。

//在父组件A.vue里引入子组件B.vue
import B from "./B"; //  引入子组件
// 注册
export default {
  components: {
    "B-B": B
  }
};
// 调用
<B-B></B-B>

给父组件设置值，也是将要改动的值

// 父组件
export default {
  data() {
    return {
      title: '我是父组件的值'
    };
  }
};

通过v-bind将title传给子组件

<B-B v-bind:title="title"></B-B>

父组件已经将值传过来了，子组件可以接收了

export default {
  props: ["title"]  
};

在子组件中确定一个点击事件

<button v-on:click="amendTitle">修改父组件中title的值</button>
export default {
  methods: {
    amendTitle () {
     // $emit是火箭屁股，发射用的，第一个参数是你一会在父组件中用到的事件名
     // 第二个参数是修改后的值
      this.$emit("amend", "我是修改之后的title");
    }
  }  
};

在父组件中调用 并且修改父组件中的title

// $event 是固定的不能改
 <B-B v-bind:title="title" v-on:amend="shijianming($event)"></B-B>
// 用子组件的值替换掉父组件中的值
export default {
  methods: {
    shijianming (event) {
      this.title = event
    }
  }
};

大功告成！