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>

 

Logo

前往低代码交流专区

更多推荐