必知的 Vue3 组件传值技巧：解锁组件交互新姿势

程序媛夏天

发布于 2024-11-13 08:25:57

83000

代码可运行

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

运行总次数：0

代码可运行

父传子defineProps

基本概念

在 Vue 3 中，父传子是一种组件间通信的方式，用于将父组件的数据传递给子组件。这种通信方式可以让组件之间更好地协作，实现功能的复用和模块的划分。

实现步骤

在父组件中传递数据 App.vue

<template>
    <Header propsName="夏天学编程" propsUrl="xiatian" />
    <button @click="countAdd">点击</button>
    <Footer :="propsWeb" />
</template>
<script setup>
   import {reactive} from 'vue';
   import Header from './header.vue';
   import Footer from './footer.vue';
   const propsWeb = reactive({
    user:'夏天',
    url:'biancheng',
    count:10
   })
   const countAdd = () => {
    propsWeb.count++;
    console.log(propsWeb.count);
   }
</script>

在子组件中接收数据 在子组件header.vue和footer.vue中，需要使用props来接收父组件传递过来的数据。首先，通过defineProps函数定义了一个props对象，它包含多个属性，并且指定了其类型。这是一种类型检查的方式，可以确保传递的数据类型符合预期。然后，将props里面的属性值赋值给propsWeb变量，这样就可以在子组件的模板中使用propsWeb来显示父组件传递过来的数据了。

header.vue

<template>
    <h3>Header</h3>
</template>
<script setup>
  const props = defineProps(["propsName","propsUrl"])
  console.log(props)
</script>

footer.vue

<template>
  <h3>Footer</h3>
</template>
<script setup>
const props = defineProps({
  user: String,
  url: {
    type: String,
    Required: true,
    default: "xiatian.com",
  },
  count: Number,
});
console.log(props);
</script>

数据类型检查和默认值

类型检查

在defineProps中可以对传递的数据进行类型检查，除了String类型，还可以是Number、Boolean、Object、Array等。

设置默认值

可以为props设置默认值，当父组件没有传递相应的数据时，子组件就会使用默认值。

动态数据传递

父组件传递的数据可以是动态变化的。例如，父组件中有一个按钮，点击按钮可以改变传递给子组件的数据。当点击按钮时，count的值会改变，这个变化会自动传递给子组件，子组件会根据新的数据进行更新。这是因为 Vue 的响应式系统会自动跟踪数据的变化，并更新与之相关的组件。

子传父defineEmits

基本概念

在 Vue 3 中，子传父是组件间通信的重要方式。它允许子组件将数据或事件传递给父组件，从而实现组件之间的反向通信，这在构建复杂的应用程序结构时非常有用。

实现步骤

在父组件中监听事件并接收数据 App.vue

<template>
    <Header @gitWeb="emitsGitWeb" @userAdd="emitsUserAdd"/>
    {{ web.url }} - {{ user }}
</template>
<script setup>
    import { ref, reactive } from 'vue'
    const web = reactive({
        name: "夏天",
        url: 'xiatian.com'
    })
    const user = ref(0)
    const emitsGitWeb = (data) => {
        console.log(data)
    }
    const emitsUserAdd = (data) => {
        console.log(data)
        user.value += data
    }
</script>

在子组件中触发事件

header.vue

<template>
    <div>
        <h1>我是header</h1>
        <button @click="add">点击</button>
    </div>
</template>
<script setup>
   const emits = defineEmits(['gitWeb','userAdd'])
   emits("gitWeb",{name:'夏天学编程',url:'www.xiatian.com'})
   // 子组件可以向父组件传递多个参数。
   const add = ()=>{
       emits('userAdd',10)
   }
</script>