vue3 组件传参

组件传参

散记点（父传子）

• 子组件通常使用自定义事件的方式向父组件传参，即props

• v-bind传入Number,Function,Object等类型

<mycomponent :count="100" :data="{name: "wise"}" :list="['foo','bar']"
    :action="() => {}"/>

• 传递组件，组件变量形式传入，动态渲染子组件，内置组件接受is参数渲染组件

    // 子组件
<component :is="child" type="success" content="nice to meet you"/>
    props: {
        child: [Object, String]
    }
    // 父组件
    <my-component :child="Alert"/>
    // 1. 引入需要的子组件
   // 2.引入并注册子组件
    // 3. 将需要引入大的组件保存到data中
    data: () => {
        // data中的组件是具有响应性的，组件作为变量传递的时候不需要具备响应性
        // markRaw方法来消除响应性，标记一个对象，使其永远不会转换为代理，只返回对象本身
        Alert: markRaw(Alert)
    }
    // 4. 向子组件传参

prop传入组件和slot有什么区别

• slot 是在父组件中插入组件，被插入的内容和子组件无关，所有逻辑都在父组件中完成
• prop传入的组件恰恰相反，父组件只是决定传入的内容，相关逻辑是在子组件中完成

散记点(子传父)

• 子组件通常使用自定义事件的方式向父组件传参，即$emit

this.$emit('event-name', data)

    // 子组件
 <button @click="handleClick"></button>
  methods: {
    handleClick() {
        this.$emit("child-click", '姓名', this.name)
    }
}
 // 父组件
<emit-component @child-click="handleChildClick"/>
    methods: {
       handleChildClick(type:String, value: String)  {
            // 在事件处理函数中接收子组件传来的参数
            this.tips = `${type}:${value}`;
        }
    }

子组件需要修改prop的值，需要使用update:prop事件，$emit 触发update:text事件并传参，然后在父组件进行赋值

    // 父组件
<emit-component :text="text" @update:text = "(val) => {text = val}"
    // 子组件
       handleClick() {
    this.$emit('update:text','数值');
}

// vue3,子组件还是要触发$emit触发update事件
    <emit-component v-model:text="text/>

    // 等价于
    <child-component
    :modelValue="text"
    @update:modelValue="text = $event"

vue3中的v-model是prop + update的语法糖，只是当prop被定义为modelValue的时候可以省略:modelValue

深层次的组件传参

• provider
• inject

步骤

• 在孙组件中同过inject定义需要传入的参数，inject可以是由属性名组成的字符串组
• 然后在祖父级组件中通过provider传入对应的参数
• provider 可以是一个对象，但为了更安全的开发组件，建议始终将provider定义为返回对象的函数
• inject 定义默认值，参考prop,将inject定义为对象

    // 孙组件
    inject: ['data'] // 通过inject定义需要接收的字段

    // 子组件无需处理
    
    // 祖父级组件
    provider: () => {
        data: '传参',
        // 如果是Object或者Array这种引用类型，需要用函数返回
        info: {
            default: () => {
                name: '',
                home: ''
            }
        }
    }

在setup中使用provider/inject需要引入Vue提供的provider全局方法

import {porvider, ref} from 'vue';
 setup() {
        // 使用ref提供响应性
        const author = ref('data');
        // provider可以定义两个参数，分别为key和value
        porvider('author',author.value);
        
        // inject接收两个参数，分别为key和默认值，默认值可以为空
        const author = inject('author', '这是默认值');
        return {author}
    }

平级子组件传参

将交互逻辑放到父组件中处理，这种思路叫做状态提升

    // 父组件
    <header-component @nav-change="page = $event"/>
    <footer-component :page= "page"/>
    // 通过事件接收Header的数据兵修改page
    data: => {
        page: 'data'
    }

    // 子组件
    // Header组件
    this.$emit('nav-change',text);
    // footer组件
    props: {
        page: String
    }

搜索

复制