项目题全解：组件通信

Step 1：父子组件通信

Step 1.1：提供装着爸爸和儿子的初始模板

基础知识：

页面效果：

父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信

具体代码：

爸爸的模板：app.vue

<!--父组件-->
 <template>
  <div id="App">
    <h2>我是爸爸</h2>
    <ChildFirst></ChildFirst>
  </div>
</template>
 <script>
import ChildFirst from "./components/ChildFirst.vue";

export default {
  components: {
    ChildFirst,
  },
  data() {
    return {};
  },
};
</script>
 <style scoped>
</style

儿子的模板：ChildFirst.vue

<!--子组件-->
 <template>
  <div>
    <h3>我是儿子</h3>
  </div>
</template>
 <script>
export default {};
</script>
 <style scoped>
</style>

Step 1.2：爸爸喊儿子吃饭了

基础操作：

第一步：

爸爸需要在template中联系上儿子 <ChildFirst :msg="msgData"></ChildFirst>

爸爸需要在data中写出自己要说的话：

data() {
    return { msgData: "儿子快回家吃饭了！" };
  },

第二步：

儿子需要在props里接受爸爸来的信息 props: ["msg"]

儿子需要在template显示爸爸说的话 <p>{{msg}}</p>

页面效果：

具体代码：

爸爸的模板：app.vue

<!--父组件-->
 <template>
  <div id="App">
    <h2>我是爸爸</h2>
    <ChildFirst :msg="msgData"></ChildFirst>
  </div>
</template>
 <script>
import ChildFirst from "./components/ChildFirst.vue";

export default {
  components: {
    ChildFirst,
  },
  data() {
    return { msgData: "儿子快回家吃饭了！" };
  },
};
</script>
 <style scoped>
</style>

儿子的模板：ChildFirst.vue

<!--子组件-->
 <template>
  <div>
    <h3>我是儿子</h3>
    <p>{{ msg }}</p>
  </div>
</template>
 <script>
export default {
  props: ["msg"],
};
</script>
 <style scoped>
</style>

Step 1.3：通过函数给儿子传递一个警报

基础操作：

第一步：

爸爸需要在html中加上函数消息 <son :msg="msgData" :fn="fnData"></son>

爸爸需要在methods中写出自己的方法：

methods: {
    fnData() {
        alert('还不回家吗')
    }
},

第二步：

儿子需要在props里接受爸爸来的方法 props: ["msg", "fn"]

儿子需要在html添加一个点击事件 <p @click="fn">{{msg}}</p>

页面效果：

具体代码：

爸爸的模板：app.vue

<!--父组件-->
 <template>
  <div id="App">
    <h2>我是爸爸</h2>
    <ChildFirst :msg="msgData" :fn="fnData"></ChildFirst>
  </div>
</template>
 <script>
import ChildFirst from "./components/ChildFirst.vue";

export default {
  components: {
    ChildFirst,
  },
  data() {
    return { msgData: "儿子快回家吃饭了！" };
  },
  methods: {
    fnData() {
      alert("还不回家吗");
    },
  },
};
</script>
 <style scoped>
</style>

儿子的模板：ChildFirst.vue

<!--子组件-->
 <template>
  <div>
    <h3>我是儿子</h3>
    <p @click="fn">{{ msg }}</p>
  </div>
</template>
 <script>
export default {
  props: ["msg", "fn"],
};
</script>
 <style scoped>
</style>

Step 1.4：儿子对爸爸的回应

基础操作：

第一步：

儿子需要添加一个点击事件 <p @click="emitIndex">儿子回复:</p>

儿子需要添加一个方法

methods: {
    emitIndex() {
        // 触发父组件的sonAnswer方法，并传递参数 “我知道了”
        this.$emit('sonAnswer', "我知道了")
    }
},

第二步：

爸爸需要用@接受儿子传来的信息

爸爸需要用methods新写一个方法，改变自己原来的数据

爸爸需要新增一个h4标签用来展示数据<h4>{{ currentIndex }}</h4>

data() {
    return {
        msgData: "儿子吃饭了！",
        currentIndex: "",
    }
},
    
...
...

methods: {
    fnData() {
        alert('还不回家吗')
    },
    sonAn(cn) {
        this.currentIndex = cn
    }
},

页面效果：

具体代码：

爸爸的模板：app.vue

<!--父组件-->
 <template>
  <div id="App">
    <h2>我是爸爸</h2>
    <ChildFirst :msg="msgData" :fn="fnData" @sonAnswer="sonAn"></ChildFirst>
    <h4>{{ currentIndex }}</h4>
  </div>
</template>
 <script>
import ChildFirst from "./components/ChildFirst.vue";

export default {
  components: {
    ChildFirst,
  },
  data() {
    return { msgData: "儿子快回家吃饭了！", currentIndex: "" };
  },
  methods: {
    fnData() {
      alert("还不回家吗");
    },
    sonAn(cn) {
      this.currentIndex = cn;
    },
  },
};
</script>
 <style scoped>
</style>

儿子的模板：ChildFirst.vue

<!--子组件-->
 <template>
  <div>
    <h3>我是儿子</h3>
    <p @click="fn">{{ msg }}</p>
    <p @click="emitIndex">儿子回复:</p>
  </div>
</template>
 <script>
export default {
  props: ["msg", "fn"],
  methods: {
    emitIndex() {
      // 触发父组件的sonAnswer方法，并传递参数 “我知道了”
      this.$emit("sonAnswer", "我知道了");
    },
  },
};
</script>
 <style scoped>
</style>

项目题全解：组件通信—上-灵析社区

Step 1：父子组件通信

Step 1.1：提供装着爸爸和儿子的初始模板

Step 1.2：爸爸喊儿子吃饭了

Step 1.3：通过函数给儿子传递一个警报

Step 1.4：儿子对爸爸的回应