vue3父子组件之间传参

父组件通过v-bind绑定一个数据,然后子组件通过defineProps接受传过来的值,

如以下代码

给Menu组件 传递了一个title字符串类型是不需要v-bind

<template>
    <div class="layout">
        <Menu  title="我是标题"></Menu>
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>

传递非字符串类型需要加v-bind  简写 冒号

<template>
    <div class="layout">
        <Menu v-bind:data="data"  title="我是标题"></Menu>
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>
 
<script setup lang="ts">
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
import { reactive } from 'vue';
 
const data = reactive<number[]>([1, 2, 3])
</script>

子组件接受值

通过defineProps 来接受 defineProps是无须引入的直接使用即可

如果我们使用的TypeScript

可以使用传递字面量类型的纯类型语法做为参数

如 这是TS特有的

<template>
    <div class="menu">
        菜单区域 {{ title }}
        <div>{{ data }}</div>
    </div>
</template>
 
<script setup lang="ts">
defineProps<{
    title:string,
    data:number[]
}>()
</script>

如果你使用的不是TS

defineProps({
    title:{
        default:"",
        type:string
    },
    data:Array
})

TS 特有的默认值方式

withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值

type Props = {
    title?: string,
    data?: number[]
}
withDefaults(defineProps<Props>(), {
    title: "张三",
    data: () => [1, 2, 3]
})

子组件给父组件传参

是通过defineEmits派发一个事件

<template>
    <div class="menu">
        <button @click="clickTap">派发给父组件</button>
    </div>
</template>
 
<script setup lang="ts">
import { reactive } from 'vue'
const list = reactive<number[]>([4, 5, 6])
 
const emit = defineEmits(['on-click'])
const clickTap = () => {
    emit('on-click', list)
}
</script>

我们在子组件绑定了一个click 事件 然后通过defineEmits 注册了一个自定义事件

点击click 触发 emit 去调用我们注册的事件 然后传递参数

父组件接受子组件的事件

<template>
    <div class="layout">
        <Menu @on-click="getList"></Menu>
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>
 
<script setup lang="ts">
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
import { reactive } from 'vue';
 
const data = reactive<number[]>([1, 2, 3])
 
const getList = (list: number[]) => {
    console.log(list,'父组件接受子组件');
}
</script>

我们从Menu 组件接受子组件派发的事件on-click 后面是我们自己定义的函数名称getList

会把参数返回过来

子组件暴露给父组件内部属性

通过defineExpose

我们从父组件获取子组件实例通过ref

 <Menu ref="menus"></Menu>
  const menus = ref(null)

然后打印menus.value 发现没有任何属性

这时候父组件想要读到子组件的属性可以通过 defineExpose暴露

const list = reactive<number[]>([4, 5, 6])
 
defineExpose({
    list
})

这样父组件就可以读到了。

 

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2中,可以使用props来实现父子组件的深层传参。父组件可以通过props将数据传递给子组件,在子组件中可以通过props接收这些数据并使用。 以下是一个示例,展示了在Vue2中如何进行父子组件的深层传参: 1. 在父组件中定义需要传递给子组件的数据。可以在父组件的data选项中定义一个属性,并在模板中使用v-bind将该属性绑定到子组件上。 2. 在子组件中声明props来接收从父组件传递过来的数据。可以在子组件的props选项中定义一个或多个属性,用于接收父组件传递的数据。 3. 在子组件中使用props接收到的数据。可以在子组件的模板中使用props来获取父组件传递过来的数据,并进行相应的处理或展示。 下面是一个示例代码: 父组件模板(Father.vue): ``` <template> <div> <div>{{ fatherMessage }}</div> <Child :childMessage="fatherMessage"></Child> </div> </template> <script> import Child from './Child.vue' export default { components: { Child }, data() { return { fatherMessage: '我是父组件传递的值' } } } </script> ``` 子组件模板(Child.vue): ``` <template> <div> <div>{{ childMessage }}</div> </div> </template> <script> export default { props: { childMessage: { type: String, required: true } } } </script> ``` 在这个示例中,父组件通过定义一个名为`fatherMessage`的属性,并将其传递给子组件`Child`。子组件通过props接收到父组件传递的`childMessage`数据,并在模板中展示出来。 这样,父子组件就实现了深层传参。父组件可以传递数据给子组件,并在子组件中使用这些数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue3父子组件传参通信](https://blog.csdn.net/qq_45397526/article/details/126281133)[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 ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值