vue3组件传参

vue3中的组件通信

一、props(父传子)

props主要用于父组件向子组件通信。在父组件中通过用 :msg=“msg” 绑定需要传给子组件的属性值,然后再在子组件中用 props 接收该属性值。

方法一:

// 父组件 传值
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue";
import { ref, reactive } from "vue";
export default {
    setup() {
        // 基础类型传值
        const msg1 = ref("父组件传给子组件的msg1");
        // 复杂类型(数组或对象)传值
        const msg2 = reactive(["父组件传给子组件的msg2"]);
        return {
            msg1,
            msg2
        }
    }
}
</script>
// 子组件 接收
<script>
export default {
  // props接受父组件传过来的值
  props: ["msg1", "msg2"],
  setup(props) {
    console.log(props);
    // { msg1:"父组件传给子组件的msg1", msg2:"父组件传给子组件的msg2" }
  },
}
</script>

方法二:使用 setup 语法糖

// 父组件 传值
<child :msg="msg">
</child>
<script setup>
    import child from "./child.vue";
    import { ref, reactive } from "vue";
    const msg = ref("父组件传给子组件的值");
    // const msg = reactive(["父组件传给子组件的值"]);
    // const msg = reactive({"父组件传给子组件的值"});
</script>
 
// 子组件 接收
<script setup>
    // 这里不需要在从vue中引入defineProps,直接用
    const props = defineProps({
        // 第一种写法
        msg: String;
        // 第二种写法
        msg:{
            type:String,
            default:""
        }
    })
    console.log(props);
</script>

注意

props中数据流是单项的,即子组件不可改变父组件传来的值

在组合式API中,如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

二、emit(子传父)

emit 也就是通过自定义事件传值,主要用于子组件向父组件通信。

在子组件的点击事件中,通过触发父组件中的自定义事件,把想传给父组件的信息以参数的形式带过去,父组件便可以拿到子组件传过来的参数值。

子组件传参

<button @click="handleClick">点击</button>
<script>
export default {
    name: "son",
    setup(props,context) {
        const handleClick = () => {
            context.emit('myClick', '我是子组件的值')
        }
        return { handleClick }
    }
}
</script>

使用setup时,它接受两个参数:

  • props: 组件传入的属性
  • context

setup 中接受的props是响应式的, 当传入新的 props 时,会及时被更新。

在vue3中得setup()中得第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

父组件接收

<div class="father">
     <h1>这是父组件</h1>
     <Son @myClick="handleClick"></Son>
</div>
<script>
import Son from './son.vue'
export default {
    name: "father",
    components: {
        Son
    },
    setup() {
        const handleClick = (val) => {
            console.log(val)
        }
        return{handleClick}
    }
}
</script>

三、expose / ref

expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中,向外暴露出属性或方法,父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。

第一种方法:expose

子组件

setup(props, context) {
        context.expose({
            childName: "子组件的名称属性",
            childMethod() {
                console.log("子组件的方法");
            }
        })
  }

父组件接收属性和方法

<Son ref="childRef"></Son>
<button @click="handlerClick">按钮</button>
<script>
import Son from './son.vue';
import { ref } from "vue";
export default {
    name: "father",
    components: {
        Son
    },
    setup() {
        const childRef = ref(null);
        const handlerClick = () => {
            // 获取子组件对外暴露的属性
            const childName = childRef.value.childName;
            console.log(childName);
            // 调用子组件对外暴露的方法
            childRef.value.childMethod();
            console.log(childRef);
        }
        return { childRef, handlerClick }
    }
}
</script>

第二种方法:defineExpose

子组件

<script setup>
defineExpose({
    childName: "子组件的名称属性",
    childMethod() {
        console.log("子组件的方法");
    }
})
</script>

四、provide / inject

provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。

provide:在父组件中可以通过 provide 提供需要向后代组件传送的信息。

inject:从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。

父组件或者可以说成祖组件

<h2>我是祖组件--{{name}}---{{price}}</h2>
<Child />
import Child from "@/components/inject/child.vue"
import { reactive,toRefs,provide } from "vue";
components:{
    Child
  },
  setup() {
    let car  = reactive({name:'特斯拉',price:'10w'});
    provide('car',car)
    return{...toRefs(car)}
  }

子组件或者是后代组件

<script>
import { inject } from 'vue';
export default {
    setup() {
       let cars =  inject('car')
       console.log(cars,'****');
       return{cars}
    }
}
</script>
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在2中,子组件通过$emit方法发送事件来传递参数给父组件,而父组件通过自定义事件来接收子组件传递的参数。具体实现是,子组件在需要传递参数的地方使用$emit方法发送事件,并传递参数值;而父组件则在接收子组件传递参数的地方定义一个自定义事件,并在该事件的回调函数中接收子组件传递的参数。 而在Vue3中,组件传参有一些变化。父组件在引入子组件后,无需再进行注册,可以直接使用子组件。子组件可以通过defineEmits方法定义要发送的事件,并使用emits方法发送事件和参数给父组件。父组件则可以直接在模板中监听子组件发送的事件,并在事件回调函数中接收子组件传递的参数。 此外,Vue2中父组件向子组件传递参数的方式是通过自定义属性发送,并在子组件中使用props接收传递的参数;而Vue3中,父组件向子组件传递参数仍然无需注册,可以直接使用子组件,并使用defineProps方法在子组件中接收父组件传递的参数。所以,Vue3相对于Vue2,组件传参的方式更加简洁和灵活。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue2和vue3 父子组件传参及区别](https://blog.csdn.net/weixin_50370865/article/details/128413462)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值