vue3父子组件传参以及父组件调用子组件的属性或方法

2023-07-03 18:10| 来源: 网络整理| 查看: 265

1 父组件通过v-bind(或者属性绑定)绑定一个数据，传递字符串类型是不需要v-bind，传递非字符串类型时候可以通过冒号简写

// 父组件

2 子组件通过defineProps接收,defineProps是无须引入的直接使用即可，下面这种写法是没有默认值

// 子组件我是父组件传过来的title------{{title}} 我是父组件传过来的arr------{{arr}} import {reactive, ref} from "vue"; // 这里的ref也可以用reactive,如果使用reactive传递值的时候就不用list.value了 const list = ref([7,8,9]) // 通过type声明Props type Props = { title?: string, // ？表示可选 arr?: number[], } // 1 ts第一种写法，但是这种写法是没默认值的 defineProps()

3 下面这种方式也是通过defineProps接收,但是这种写法是有默认值的，是ts中特有的写法

// 子组件我是父组件传过来的title------{{title}} 我是父组件传过来的arr------{{arr}} import {reactive, ref} from "vue"; const list = ref([7,8,9]) // 1 可以使用type声明Props type Props = { title?: string, // ？表示可选 arr?: number[], } // 2 ts第二种写法，withDefaults是ts中特有的,是有默认值的 withDefaults(defineProps(),{ title: '默认值', arr: () => [], })

4 刚才子组件中使用的是type声明Props，也可以使用下面这种方式去声明

interface Props { title?: string, arr?: number[], }

5 如果在js中，子组件中defineProps是下面这种写法

defineProps({ title:{ type: String, default: '', }, arr:{ type: Array, default: [], } })

5 子组件向父组件传参，首先是通过在子组件中defineEmits派发一个事件,下面是在子组件中绑定了一个click 事件 ,通过defineEmits 注册了一个自定义事件，点击click 触发 emit 去调用我们注册的事件, 然后传递参数

// 子组件派发给父组件 import {reactive, ref} from "vue"; const list = ref([7,8,9]) // 如果使用了ts,defineEmits第一种方式 // const emit = defineEmits(['send']) // 如果使用了ts,defineEmits第二种方式 const emit = defineEmits() const clickTap = () => { emit('send', list.value) }

6 在父组件中接收

// 父组件 import Son from './components/Son.vue' const sonSend = (val:number[]) => { console.log('子组件传过来的值',val) }

7 父组件使用子组件的方法或属性，要在子组件中通过defineExpose向外暴露出去

// 子组件 import { ref} from "vue"; const list = ref([7,8,9]) const test = () => { console.log('子组件的方法') } // defineExpose用法，可以向外暴露属性或者方法 defineExpose({ list, // list是向外暴露的属性/值 test, // test是向外暴露的方法 })

8 父组件中使用子组件的方法，要通过ref获取子组件实例

// 父组件 import Son from './components/Son.vue' import {onMounted, ref} from "vue"; const sonRef = ref() //使用子子组件的属性 onMounted(()=>{ console.log(sonRef.value?.list) // 这里为了测试，可以不在mounted中，根据自己在哪个地方使用即可 console.log(sonRef.value?.test()) })

【本文地址】

公司简介

联系我们