Vue3父子通訊方式及Vue3插槽的使用方法詳解
更新時間：2023年01月26日 12:29:10 作者：Nanchen_42
這篇文章主要介紹了Vue3父子通訊方式及Vue3插槽的使用方法詳解,需要的朋友可以參考下
在Vue3中父子通訊方式
Vue3父傳子（props）
父組件如下：
<template>
<div class="about">
<h1>This is an about page</h1>
<children :num="num" age="30"></children>
</div>
</template>
<script>
import children from "../components/children.vue";
import { ref } from "vue";
export default {
setup() {
let num = ref("《nanchen》");
return {
num,
};
},
components: {
children,
},
};
</script>子組件如下：
<template>
<div>我是子組件 我的父組件值為：{{ yy }}</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Vue3appChildren",
props: {
num: {
type: Number,
},
},
setup(props) {
let yy = ref(props.num);
return {
yy,
};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
</style>
setup中的參數(shù)分別有：
props：值為對象，包含：組件外部傳遞過來，且組件內部聲明接收了的屬性。
context：上下文對象
attrs: 值為對象，包含：組件外部傳遞過來，但沒有在props配置中聲明的屬性, 相當于 this.$attrs。
slots: 收到的插槽內容, 相當于 this.$slots。
emit: 分發(fā)自定義事件的函數(shù), 相當于 this.$emit
props中可以接收父組件傳遞給子組件的參數(shù)
Vue3子傳父（{emit}）
父組件：
<template>
<div class="about">
<h1>This is an about page</h1>
<children :num="num" age="30" @test="showHello"></children>
</div>
</template>
<script>
import children from "../components/children.vue";
import { ref } from "vue";
export default {
setup() {
let num = ref("《nanchen》");
function showHello(value) {
console.log(value);
}
return {
num,
showHello,
};
},
components: {
children,
},
};
</script>子組件
<template>
<div @click="aboutClick">我是子組件 我的父組件值為：{{ yy }}</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Vue3appChildren",
props: {
num: {
type: Number,
},
},
setup(props, { emit }) {
let yy = ref(props.num);
function aboutClick() {
emit("test", "你好你好"); // 子傳父
}
return {
yy,
aboutClick,
};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
</style>點擊div效果如下：
Vue3插槽
<children :num="num" age="30" @test="showHello">
<h1>南辰，Hello</h1>
</children><template>
<div @click="aboutClick">我是子組件 我的父組件值為：{{ yy }}</div>
<slot></slot>
</template>
具名插槽的寫法
<slot name="aabb"></slot>
<HelloWorld> <template v-slot:aabb> <span>NanChen，你好</span> </template> <!-- <template #aabb> <span>NanChen，你好</span> </template> --> </HelloWorld>
到此這篇關于Vue3父子通訊方式及Vue3插槽的使用方法詳解的文章就介紹到這了,更多相關Vue3父子通訊方式及Vue3插槽的使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue.js中實現(xiàn)密碼修改及頁面跳轉和刷新的完整指南
在現(xiàn)代Web應用中,用戶賬戶管理是一個核心功能,其中密碼修改是一個常見的需求,本文將詳細介紹如何在Vue.js應用中實現(xiàn)用戶密碼修改功能,并在成功后跳轉到登錄頁面并刷新該頁面,需要的朋友可以參考下2024-12-12
Vue.js + Nuxt.js 項目中使用 Vee-validate 表單校驗
vee-validate 是為 Vue.js 量身打造的表單校驗框架，允許您校驗輸入的內容并顯示對應的錯誤提示信息。這篇文章給大家?guī)砹薞ue.js 使用 Vee-validate 實現(xiàn)表單校驗的相關知識，感興趣的朋友一起看看吧2019-04-04
這篇文章主要介紹了vue如何解決輪播圖(Swiper)第一張圖片一閃而過問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了vue組件生命周期，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過代碼講解非常詳細,需要的朋友可以參考下2024-01-01
Vue.js 是一套構建用戶界面的框架，**只關注視圖層**，它不僅易于上手，還便于與第三方庫或既有項目整合。這篇文章主要介紹了vue 的基本語法和常用指令,需要的朋友可以參考下2019-07-07
vue2.0與bootstrap3實現(xiàn)列表分頁效果
這篇文章主要為大家詳細介紹了vue2.0與bootstrap3實現(xiàn)列表分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue組件傳值過程接收不成功的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06