【Vue3】第十四部分 父子组件传参

【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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

子组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

子组件

<script lang="ts" setup>
    import {ref} from 'vue'
    const message = ref('子组件信息')
    const list = ref<string[]>(['a','b','c'])
    // 父组件获取到子组件的实例但是子组件没有暴露出去,父组件没办法接收
    // 可以使用defineExpose
    defineExpose({
        message,
        list
    })
</script>
1
2
3
4
5
6
7
8
9
10
11

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！