vue3 学习笔记10 -- 父子组件传参和组件间通信

vue3 学习笔记10 – 父子组件传参和组件间通信

父子组件之间的传参

父子组件之间的传参可以通过属性(prop)和事件(event)来实现

使用属性(props)传递数据

在子组件中定义 props

• 在子组件中使用 defineProps 来定义接收的属性

// children.vue
<template>
<div>{{ name }}: {{age}}</div>
  <div>{{personal.address}} {{personal.sex}}</div>
  <div v-for="(item,index) in list" :key="index">
    {{item.phone}}
  </div>
</template>

<script lang="ts" setup>
interface Phone {
  phone: string;
}
interface ChildProps {
  name: string;
  age: number;
}
const props = defineProps(['name','age','personal','list'])
// 或者
const props= defineProps({
    name: {
        type: String as PropType<string>,
        default: () => {
            return ''
        }
    },
    age:{
      type: Number as PropType<number>,
      default: () => {
            return 0
      }  
    },
    personal:{
      type: Object,
      default: () => {
            return {}
      }  
    },
    list:{
      type: Array as () => User[],
      default: () => {
            return []
      }  
    }
})
</script>

在父组件中传递参数

• 在父组件中使用子组件的标签，并通过属性传递数据：

  // parent.vue
        <template>
        <childrenTemplate :name="name" :age="age" :personal="personal" :list="list"></childrenTemplate>
        </template>
        <script lang="ts" setup>
        import childrenTemplate from './components/children.vue'

        let name = ref('小涨')
        let age = ref(8)

        let personal = reactive({
        address:'上海',
        sex:'女'
        })
        let list = ref([{
        phone:'1111111'
        },{
        phone:'2222222'
        }])

</script>

defineEmits 使用事件进行通信

• 在子组件中定义事件
  • 在子组件中，使用 defineEmits 定义事件，并通过 emit 方法触发事件

// children.vue
<template>
<div>{{ name }}: {{age}}</div>
  <div>{{personal.address}} {{personal.sex}}</div>
  <div v-for="(item,index) in list" :key="index">
    {{item.phone}}
  </div>
  <el-button @click="handleChangeParent">改变名字</el-button>
  <el-button @click="handleChangeParent2">改变年龄</el-button>
</template>

<script lang="ts" setup>
interface Phone {
  phone: string;
}
interface ChildProps {
  name: string;
  age: number;
}
const props = defineProps(['name','age','personal','list'])
// 或者
const props= defineProps({
    name: {
        type: String as PropType<string>,
        default: () => {
            return ''
        }
    },
    age:{
      type: Number as PropType<number>,
      default: () => {
            return 0
      }  
    },
    personal:{
      type: Object,
      default: () => {
            return {}
      }  
    },
    list:{
      type: Array as () => User[],
      default: () => {
            return []
      }  
    }
})
const $emit = defineEmits(['childClick','childChangeName']);
const handleChangeParent = ()=>{
  $emit('childClick',43)
}
const handleChangeParent2 = ()=>{
  $emit('childChangeName','小明')
}
</script>

• 在父组件中监听事件
  • 在父组件中监听子组件触发的事件，并处理数据或者触发相应的方法。

  // parent.vue
        <template>
        <childrenTemplate :name="name" :age="age" :personal="personal" :list="list" @child-click="handleEmit" @child-change-name="handleGet"></childrenTemplate>
        </template>
        <script lang="ts" setup>
        import childrenTemplate from './components/children.vue'

        let name = ref('小涨')
        let age = ref(8)

        let personal = reactive({
            address:'上海',
            sex:'女'
        })
        let list = ref([{
            phone:'1111111'
            },{
            phone:'2222222'
        }])
        const handleEmit = (val:number)=>{
          age.value =val
        }

        const handleGet = (val:string)=>{
          name.value = val
        }

</script>

组件间的通信

如果需要在多层级的组件中进行数据传递，可以使用provide 和 inject API。

• 在父组件中提供数据:

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

let list = ref([{
    phone:'1111111'
    },{
    phone:'2222222'
}])

const deleteMsgByIndex = (index)=> {
  list.value.splice(index, 1);
}
const addMsg = (info)=> {
  list.value.push(info)
}

provide('messageInfo', {
  list: list,
  deleteMsgByIndex,
  addMsg
}); // 提供 counter 数据给子组件
</script>

• 在子组件中注入数据:

<template>
  <button @click="handleAdd">
    添加
  </button>
  
  <div v-for="(item, index) in list" :key='index'>
    <span>{{item.phone}}</span>
    <button @click.prevent="handledelete(index)">
    删除
  </button>
  </div>

</template>

<script setup lang="ts">
import { inject } from 'vue';

const {addMsg,list,
  deleteMsgByIndex} = inject("messageInfo")
const handleAdd = ()=>{
  addMsg({phone:'3333333'})
}
const handledelete = (index)=>{
  deleteMsgByIndex(index)
}
</script>