父子组件传参
1.props 这个和之前的vue2基本一样2.provide 父组件向子组件传参inject 子组件接受父组件传来的参数*这两个函数只能在 setup() 函数中使用,不限层级1.父组件中需要先正常引入子组件importAbout from "../views/About"2.父组件引入provideimport { defineComponent, provide } from "vue";3
·
1.props 这个是最常用的
2. provide 父组件向子组件传参
inject 子组件接受父组件传来的参数
*这两个函数只能在 setup() 函数中使用,不限层级
1.父组件中需要先正常引入子组件
import About from "../views/About"
2.父组件引入provide
import { defineComponent, provide } from "vue";
3.和vue2一样注册子组件(在setup函数之外)
components: {
About
}
4.使用 provide ('数据名称', 要传递的数据)
setup() {
provide("message", "我是父组件向子组件传递的值");
}
5.子组件中引入inject来接受父组件传的值
import {inject } from "vue";
6.调用 inject 函数,通过指定的数据名称(和父级provide数据名一致),获取到父级传的值,一定要return出去
setup() {
const childMessage = inject("message");
return {
childMessage
}
}
8.子页面中使用
<h2>{{childMessage}}</h2>
更多推荐
已为社区贡献15条内容
所有评论(0)