一、子传父（emit发送，v-on接）

在父组件中定义并注册子组件。

1、子组件关键代码：

html中： 定义一个发射的方法。如下：

<div>
      大家好，我是子组件
      <button @click="fashe">点我发送</button>
  </div>

js中： this.sonData是本页面，前面的 “sonData” 是父组件接的名字。如下：

data() {
    return {
      sonData: { 
          flag: false, 
          name: "我是子组件中的数据" 
        }
    };
  },
  methods: {
    fashe() {
      this.sonData.flag = !this.sonData.flag;
      this.$emit("sonData", this.sonData);
    }
  }

2、父组件关键代码：

html中：

<div id="app">
    <div class="big">
      我是父组件
      <div v-if="flag">{{dadMessage}}</div>
    </div>
    <Son v-if="sonData" v-on:sonData="sonData"></Son>
  </div>

js中：

data() {
    return {
      dadMessage: "",
      flag: false
    };
  },
  methods: {
    sonData(sonData) {
      this.dadMessage = sonData.name;
      this.flag = sonData.flag;
    }
  }

效果：

点击前：

点击前

点击后

总结：

父子传参中，乱七八糟的参数能取一样的名字就取一样的名字。烦不了了。

二、子传父（在子组件上自定义绑定，子组件props接）

1、父组件关键代码：

html中： 定义一个 sonData 方法。如下：

<div id="app">
    <div class="big">
      我是父组件
      <button @click="fashe">点我发送</button>
    </div>
    <Son v-if="sonData" :sonData="sonData"></Son>
  </div>

js中：

data() {
    return {
      sonData:{
        flag:false,
        name:"我是父组件中的值，现在要给子组件"
      }
    };
  },
  methods:{
    fashe(){
      this.sonData.flag = !this.sonData.flag
    }
  }

2、子组件关键代码：

html中：

<div>
    大家好，我是子组件
    <div v-if="sonData.flag">{{sonData.name}}</div>
  </div>

js中：

props:{
        sonData:''
    },

效果：

点击前：

点击前

点击后

总结：

名字能取一样就一样，烦不了。还有比父传子更简单的？