【Vue3】第十四部分 父子组件传参
14. 父子组件传参
14.1 父传子(props)
父组件
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import Children from './Children.vue';
const list = reactive<number[]>([1,2,3])
const title = ref<string>('我是父组件标题')
</script>
<template>
<div>
<h1>我是父组件</h1>
<hr>
<Children :list="list" :title="title"></Children>
</div>
</template>
子组件
<script lang="ts" setup>
// 这种方法接收,接收到的值都是any
// const {title,list} = defineProps(['title','list'])
// 定义一个type,去限制defineProps
type IPrpps = {
title:string,
list:number[]
}
// 这样做的好处是可以限制接收参数的类型,并且在模板种可以直接使用
defineProps<IPrpps>()
</script>
<template>
<div>
<h1>我是子组件</h1>
<h3>父亲传入的数据: --- {{title}} --- {{list}}</h3>
</div>
</template>
withDefaults:用来设置Props默认值
<script lang="ts" setup>
// 这种方法接收,接收到的值都是any
// const {title,list} = defineProps(['title','list'])
// 定义一个type,去限制defineProps
type IPrpps = {
title:string,
list:number[]
}
// 这样做的好处是可以限制接收参数的类型,并且在模板种可以直接使用
withDefaults(defineProps<IPrpps>(),{
title:'我是默认值',
// 注意数组对象需要
list:()=>[1,2,3]
})
</script>
<template>
<div>
<h1>我是子组件</h1>
<h3>父亲传入的数据: --- {{title}} --- {{list}}</h3>
</div>
</template>
14.2 子传父(emit)
父组件
<script lang="ts" setup>
import Children from './Children.vue'
// 当自定义事件被触发时调用该函数
const getInfo = (data:string) =>{
console.log(data);
}
</script>
<template>
<div>
<h1>我是父组件</h1>
<hr>
<!-- 绑定自定义事件 -->
<Children @click-Info="getInfo"></Children>
</div>
</template>
子组件
<script lang="ts" setup>
import {ref} from 'vue'
const detail = ref<string>('今天天气晴朗')
// defineEmits传入的是一个数组,数组种写的是自定义事件的名称,可以触发多个自定义事件
const $emit = defineEmits(['click-Info1','click-Info2'])
const dispatchDetail1 = () =>{
$emit('click-Info1',detail)
}
const dispatchDetail2 = () =>{
$emit('click-Info2',detail)
}
</script>
<template>
<div>
<h1>我是子组件</h1>
<button @click="dispatchDetail1">派发给父组件1</button>
<button @click="dispatchDetail2">派发给父组件2</button>
</div>
</template>
14.3 子传父(ref)
父组件
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import ChildrenVue from './Children.vue';
const childrenRef = ref()
type Idata = {
message:string,
list:string[]
}
const data = reactive<Idata>({
message:'',
list:[]
})
// 将实例身上的数据存起来
const getData = () =>{
data.message = childrenRef.value?.message
data.list = childrenRef.value?.list
}
</script>
<template>
<div>
<ChildrenVue ref='childrenRef'/>
<button @click="getData">获取子组件身上的实例</button>
<div>{{data.message}}</div>
<div v-for="item in data.list" :key="item">{{item}}</div>
</div>
</template>
子组件
<script lang="ts" setup>
import {ref} from 'vue'
const message = ref('子组件信息')
const list = ref<string[]>(['a','b','c'])
// 父组件获取到子组件的实例但是子组件没有暴露出去,父组件没办法接收
// 可以使用defineExpose
defineExpose({
message,
list
})
</script>
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/82847.html