vue3组件之间通信(三)——爷孙组件传递属性和方法
爷孙组件传递属性和方法,包含setup函数和scriptsetup 两种形式
·
前言:爷孙组件使用prop一层一层传值和方法由于比较简单这里就不讲了,主要讲解使用$attrs是如何解决爷孙组件传值的
1:setup函数传递属性和方法($attrs)
1:代码
// 爷组件 grandFather.vue
<template>
<div class="father">
<h1>爷组件:{{ grandFatherMsg }}</h1>
<Father
:grandFatherMsg="grandFatherMsg"
:str="'张三'"
:num="111"
:bol="true"
@clickGrandFather="clickGrandFather"
:sdfsdf="sdfsdf"
/>
</div>
</template>
<script>
import { defineComponent, ref } from "vue";
import Father from "./father.vue";
export default defineComponent({
components: {
Father,
},
setup(prop, ctx) {
const grandFatherMsg = ref("爷组件的值——张三");
function clickGrandFather() {
console.log("爷组件的log");
}
function sdfsdf() {
console.log("爷组件的log222");
}
return {
grandFatherMsg,
clickGrandFather,
sdfsdf,
};
},
});
</script>
// 父组件 father.vue
<template>
<div class="father">
<h1>父组件</h1>
<grandSon v-bind="$attrs" />
</div>
</template>
<script>
import { defineComponent } from "vue";
import grandSon from "./grandSon.vue";
export default defineComponent({
components: {
grandSon,
},
setup(prop, ctx) {
console.log("父组件", prop, ctx);
return {};
},
});
</script>
// 孙组件 grandSon.vue
<template>
<div class="grandSon">
<h2>孙组件</h2>
<button @click="clickgrandSon">点我触发爷组件</button>
</div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
setup(prop, ctx) {
console.log("孙组件", prop, ctx.attrs);
// 孙组件的方法
function clickgrandSon() {
ctx.attrs.onClickGrandFather();
ctx.attrs.sdfsdf();
console.log("grandSon的log");
}
return {
clickgrandSon,
};
},
});
</script>
<style scoped>
.grandSon {
width: 200px;
height: 100px;
border: 1px solid green;
}
</style>
2:主要代码和详细讲解
3:注意点
(1)与父子组件不同,爷孙组件传递的方法使用@和:都是可以的如下图,但是为了更好的区分属性和方法,并不推荐使用:的形式来传递方法
注意点:(2):如下面代码所示,‘@’传递的方法在孙组件使用的时候,需要将方法名首字母大写,并且前面加上on关键字,而‘:’传递的方法则不需要
// 孙组件的点击方法
function clickgrandSon() {
ctx.attrs.onClickGrandFather(); // @传递的方法首字母大写,前面加上关键字on
ctx.attrs.sdfsdf(); // : 传递的方法可以直接使用
console.log("grandSon的log");
}
2:script setup 语法糖传递属性和方法
1:代码
// 爷组件 grandFather.vue
<template>
<div class="father">
<h1>爷组件:{{ grandFatherMsg }}</h1>
<Father
:grandFatherMsg="grandFatherMsg"
:str="'李四'"
:num="111"
:bol="true"
@clickGrandFather="clickGrandFather"
:sdfsdf="sdfsdf"
/>
</div>
</template>
<script setup>
import { ref } from "vue";
import Father from "./father.vue";
const grandFatherMsg = ref("爷组件的值——李四");
function clickGrandFather() {
console.log("爷组件的log");
}
function sdfsdf() {
console.log("爷组件的log222");
}
</script>
<style scoped>
.father {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
// 父组件 father.vue
<template>
<div class="father">
<h1>父组件</h1>
<grandSon v-bind="$attrs" />
</div>
</template>
<script setup>
import grandSon from "./grandSon.vue";
</script>
<style scoped>
.father {
width: 200px;
height: 200px;
border: 1px solid yellow;
}
</style>
// 孙组件 grandSon.vue
<template>
<div class="grandSon">
<h2>孙组件:{{ $attrs.grandFatherMsg }}</h2>
<button @click="$attrs.onClickGrandFather()">点我触发爷组件方法1</button>
<button @click="$attrs.sdfsdf()">点我触发爷组件方法2</button>
<button @click="clickgrandSon">点我触发爷组件方法333</button>
</div>
</template>
<script setup>
import { ref, useAttrs } from "vue";
const attrs = useAttrs();
// 孙组件的方法
function clickgrandSon() {
console.log("孙组件的方法", attrs);
}
</script>
<style scoped>
.grandSon {
width: 200px;
height: 100px;
border: 1px solid green;
}
</style>
2:主要代码和详细讲解
3:注意点
(1):在html内容中setup函数的页面可以直接使用 $attrs.xxx 来获取方法和属性,但这样你会发现不能使用属性进行操作,所以我依旧推荐第二种方法,但这种方法可以使得你直接调用爷组件的方法
(2):在script setup 中请你记住下面两行代码,它可以使你获取到爷组件传递过来的所有属性和方法
import { useAttrs } from "vue";
const attrs = useAttrs();
参考文章:详细了解Vue3 - $attrs 的几种用法
更多推荐
已为社区贡献4条内容
所有评论(0)