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>

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

<template><Son @childToParent="childToParent"></Son>
</template><script>
import Son from "./components/Son.vue";export default {components: { Son },setup(props) {const childToParent = (msg) => {console.log(msg);};return {childToParent,};},
};
</script><style scoped>
</style>

子组件

<template><div style="border: 1px solid #ddd"><button @click="handleClick">触发父组件方法</button></div>
</template><script>
export default {name: "childrenComponent",emits: ["childToParent"],setup(props, { emit }) {const handleClick = () => {emit("childToParent", "传递消息");};return {handleClick,};},
};
</script>
<style scoped>
</style>

vue3.0父子组件的通信相关推荐

vue3.0 父子组件通信
子传父:子组件调用父组件方法 vue3.0不再支持this,所以this.$emit()方法不在被支持. 以下为VUE3.0新写法子组件: <script> import { defin ...
vue3.0 父子组件传值问题
使用vue3.0时遇到父子传值的问题,顺便记录一下问题背景: 如图所示,编辑按钮是父组件的部分,下面的表单是子组件需要:按下父组件中的编辑按钮时,子组件的表单需要变成可编辑状态,在可编辑状态下按下 ...
Vue3组件开发-父子组件之间通信的方式
父子组件之间如何进行通信呢? 父组件传递给子组件:通过props属性: 子组件传递给父组件:通过$emit触发事件: 一.父组件传递给子组件在开发中很常见的就是父子组件之间通信,比如父组件有一些数据 ...
Vue2.0入门系列——父子组件间通信
1.子组件更新,父组件不变点击"按钮"按钮,子组件数据被修改,父组件数据不变 =========>>>>>> 项目源代码, <hea ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
vue3语法糖父子组件的通信
vue父子组件的通信父组件想调用子组件的方法通过ref属性获取子组件实例,然后子组件将方法暴露出去,父组件就可以调用子组件的方法例如父组件点击编辑按钮,弹出添加对话框子组件,要调用对话框子组件 ...
【Vue父子组件间通信】
Vue父子组件间通信父子组件通信父传子 (props) 子传父 (自定义事件) 完整代码效果父子组件通信父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...
[react] react父子组件如何通信？
[react] react父子组件如何通信? props 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[react] react非父子组件如何通信？
[react] react非父子组件如何通信? redux context 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端 ...

vue3.0父子组件的通信

vue3.0父子组件的通信

Vue3.0组件通信

vue3.0父子组件的通信相关推荐

最新文章

热门文章