vue3日常知识点学习归纳

news2025/1/19 8:23:48

1，父子组件传递：

父组件传递参数

<template>
    <div>
        <!-- 子组件 参数：num 、nums -->
        <child :num="nums.num" :doubleNum="nums.doubleNum" @increase="handleIncrease"></child>
    </div>
</template>

<script setup lang="ts">
 import child from './child.vue';
  import { ref,reactive } from 'vue';
  // 对象默认
  const nums = reactive({
    num: 0,
    doubleNum: 0
  });
  // 点击事件
  const handleIncrease = () => {
    // 每次+1
    nums.num++
    // 每次+2
    nums.doubleNum += 2
  };
</script>

子组件接收参数

defineEmits： defineEmits() 宏仅限于 setup 语法糖使用，用来声明组件要触发的事件。

<template>
    <div>
        <span>点击次数：{{ props.num }}</span><br/>
        <span>双倍次数：{{ props.doubleNum }}</span><br/>
        <el-button @click="handelClick">点击</el-button>
    </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  // 声明组件要触发的事件   子传父之前触发
  const emits = defineEmits(['increase']);
  // 声明接收参数
  const props = defineProps({
    num: String,
    doubleNum: String
  });
  //  点击事件  触发子传父
  const handelClick = () => {
    console.log('触发子组件点击')
    // 触发父组件事件
    emits('increase')
  };
</script>

上是子组件

父组件接收触发：

<template>
    <div>
        <!-- 子组件 触发事件：handleIncrease -->
        <child @increase="handleIncrease"></child>
        <br />
        我是父组件，我接收到的参数：<span v-if="data.name">姓名：{{data.name}}</span> <span v-if="data.age">, 年龄：{{data.age}}</span>
    </div>
</template>

<script setup lang="ts">
 import child from './child.vue';
  import { ref,reactive } from 'vue';
  // 接收对象封装
  const data = reactive({
    name: '',
    age: ''
  });
  // 点击事件
  const handleIncrease = (val : any) => {
    data.name = val.name
    data.age = val.age
  };
</script>

父组件小改变特性：

<template>
    <div>
        <!-- 子组件 参数：对象 -->
        <child v-bind="nums" @increase="handleIncrease"></child>
    </div>
</template>

这实际上等价于：

<template>
    <div>
        <!-- 子组件 参数：num 、nums -->
        <child :num="nums.num" :doubleNum="nums.doubleNum" @increase="handleIncrease"></child>
    </div>
</template>