常用的父子组件通信方法:
//父组件 <template> <my-header :title="title" @changeTitle="changeTitle"></my-header> </tempale> <script> import myHeader from "@/components/Header.vue"; //引入组件 export default { data(){ return{ title:"父传子测试" } }, components:{ "my-header":myHeader }, methods:{ changeTitle(val){ this.title = val } } } </script> //子组件 myheader.vue <template> <h1>{{ title }}</h1> <button @click="triggerMethod">触发父组件方法</button> </tempalte> <script> export default{ props: {//接收父组件出来的title title:{ type: String, default: "" } }, methods:{ triggerMethod:function(){ this.$emit("changeTitle","传参数"); //子组件通过$emit 与父组件通信 } } } </script>
provide/inject(提供/注入),可以实现跨层组件(祖孙)间通信,不需要将数据一层一层向下传递:
//父组件 Father.vue <template> <son></son> </template> <script> import { defineComponent, reactive, provide, computed } from "vue"; import son from "@/components/Son"; export default defineComponent({ components: { son }, setup() { let params = reactive({ name: "来自父亲的参数" }) provide("name", computed(()=> params.name)); //用计算属性返回值能够动态传递来子/孙组件(当子孙组件通过方法触发修改name值时) function changeName(val){ params.name = val; //子孙组件触发 } provide("changeName",changeName); } }) </script>
//儿子组件 Son.vue <template> <h2>{{ name }}</h2> <button @click="changeName('儿子组件触发')">儿子组件触发Name修改</button> <div class="grandson"> <grandson></grandson> </div> </template> <script> import grandson from "@/components/grandson"; import { defineComponent, inject } from "vue"; export default defineComponent({ components: { grandson }, setup() { let name = inject("name"); //接收Father组件传来的name let changeName = inject("changeName"); //接收方法 return { name, changeName, }; }, }); </script>
//孙子组件 grandson.vue <template> <h2>{{ name }}</h2> <button @click="changeName('孙子组件触发')">孙子组件触发Name修改</button> </template> <script> import { defineComponent, inject, watch } from "vue"; export default defineComponent({ name: "HelloWorld", setup() { let name = inject("name"); let changeName = inject("changeName"); watch(name,(newValue,oldValue)=>{ //这里可以监听name的变化 }) return { name, changeName, }; }, }); </script>
子孙组件都接收到Father组件传来的参数"来自Father组件的参数"。
当点击儿子组件或者孙子组件按钮时,触发changeName事件在Father组件上修改name值。