Vue父子组件通信

一、父组件向子组件传递数据

（1）在父组件中的子组件标签中添加属性，给子组件传递数据

• 要是属性值为变量，要添加冒号绑定属性

    <Sun title="我是aaa" :msg="msg"></Sun>

（2）子组件通过props来接收（与data同级）

    export default {
      props: ["title", "msg"],
      created() {
        console.log(this.title);
      }
    };

二、子组件向父组件传递数据

（1）在父组件中的子组件标签中添加自定义事件，同时绑定函数，传递给子组件

    <Sun @aaa="test"></Sun>

（2）子组件用this.$emit('aaa', '返回的数据') 触发父组件传过来的自定义事件，并传递数据给父组件

  created() {
    this.$emit("aaa", "bbb");
  }

（3）第（2）步执行后，父组件自定义事件绑定的函数就会被执行，同时接收子组件传递过来的数据

• 定义形参data用于接收子组件传递过来的数据

  methods: {
    test(data) {
      console.log(data);
    }
  }