provide 父传子 祖传孙 并且 子改变父 孙改变祖
Posted 完美前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了provide 父传子 祖传孙 并且 子改变父 孙改变祖相关的知识，希望对你有一定的参考价值。
祖先组件
<template>
我是head{{title}}
<v-head/>
</template>
<script>
import VHead from \'./components/head.vue\';
import {provide, ref} from "vue";
export default {
name: \'App\',
components: {
VHead,
},
data () {
return {
\'msg\': \'123\',
}
},
setup() {
let title = ref(\'我是head的title\');
provide(\'title\', title);
return {
title
}
}
}
</script>
子孙组件
<template>
<section>
123{{ abc }}
<button @click="changeTitle">footer的提交</button>
</section>
</template>
<script>
import { inject } from \'vue\';
export default {
name: "footer",
setup () {
let abc = inject(\'title\');
let changeTitle = () => {
abc.value = \'123\'
}
return{
abc,
changeTitle
}
}
}
</script>
以上是关于provide 父传子 祖传孙 并且 子改变父 孙改变祖的主要内容，如果未能解决你的问题，请参考以下文章