标签：vue setup Son 父子 vue3.0 组件 import defineComponent

vue3.0父子组件的通信

• Vue3.0组件通信

Vue3.0组件通信

vue3.0脚手架setup内部的组件通信

1、父到子通过props

父组件

<template>
  <div >
    <Son data="currentRole.arr"></Son>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive} from "vue";
import Son from "../components/Son.vue";

export default defineComponent({
  name: "father",
  components: { Son },
  setup() {
     let currentRole = reactive({
      arr: [{name:"小王"，age:21}],
    }); 
    return { currentRole};
  },
});
</script>

子组件

<template>

</template>

<script lang="ts">
import { onMounted } from "vue";
export default defineComponent({
 props: {
    data: {},
  },
  setup() {
    const getData = () => {
      console.log("传递的参数", props.data);
    };
    onMounted(() => {
      getData ();
    });
  },
});
</script>

2、父到子通过provide和inject
父组件

<template>
   <div >
    <Son ></Son>
  </div>
</template>

<script lang="ts">
import { provide, ref } from "vue";
import Son from "../components/Son.vue";

export default defineComponent({
  name: "father",
  components: { Son },
  setup() {
    provide("customVal", "我是父组件向子组件传递的值");
  },
});
</script>

子组件

<template>
  <div>
    <h1>{{ customVal}}</h1>
  </div>
</template>

<script lang="ts">
import { inject, ref } from "vue";
export default defineComponent({
  setup() {
    const customVal = inject("customVal");
    return { customVal,};
  },
});
</script>

3、父组件调用子组件的方法
父组件

<template>
  <div >
    <Son ref="RefChilde"></Son>
    <div  @click="fnCallChild">
      点我调用Son组件里的方法
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Son from "../components/Son.vue";

export default defineComponent({
  name: "father",
  components: { Son },
  setup() {
    const RefChilde = ref();     //RefChilde 要和Son组件上的class名相同
    const fnCallChild = () => {
      RefChilde.value.sonFn();      //sonFn是子组件里的方法
    };
    return { RefChilde, fnCallChild };
  },
});
</script>

子组件

<template>
  <div>
    <h1>{{ conts }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const conts = ref("我是子组件");
    const sonFn = () => {
      conts.value = "我被父组件里调用了子组件的方法修改了数据";
    };
    return { conts, sonFn };
  },
});
</script>

标签：vue,setup,Son,父子,vue3.0,组件,import,defineComponent
来源： https://blog.csdn.net/weixin_51341210/article/details/121794616

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。