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>