Vue 父子组件传参、插槽

setup 函数中有两个主要的参数:props、context 。

props 用于接收父组件传递过来的数据,父传子。

context 指的是 setup 的上下文,它有三个属性:attrs、slots、emit 。

attrs 用于:当父组件传递过来的数据,没有被 props 接收时,数据就会存放在 attrs 属性中。

slots 用于:接收父组件传递过来的插槽内容,相当于 vue2 中的 `this.$slots` 。

emit 用于:创建自定义事件函数,子传父。相当于 vue2 中的 `this.$emit` 。

setup 函数中的 props 参数【父传子】

父组件

html 复制代码
<template>
    <h1>我是父组件</h1>
    <hr />
    <!-- 3.使用子组件,并通过自定义属性传递数据 -->
    <Child :name="info.name" sex="男" :age="info.age"></Child>
</template>

<script>
import { reactive } from 'vue';
// 1.引入子组件
import Child from '../components/Child.vue';
export default {
    name: "Parent",
    // 2.注册子组件
    components: { Child },
    setup() {
        let info = reactive({
            name: "张三",
            age: 18
        })
        // 返回数据
        return { info }
    }
}
</script>

子组件

html 复制代码
<template>
  <h1>我是子组件</h1>
  <p>姓名:{{ props.name }}</p>
  <p>性别:{{ props.sex }}</p>
  <p>年龄:{{ props.age }}</p>
</template>

<script>
export default {
  name: "Child",
  // 接收数据,未接收的数据不会在 props 参数中显示
  props: ['name', 'sex'],
  setup(props, context) {
    console.log(props);
    // 返回数据
    return { props }
  }
}
</script>

效果

props 参数的几种接收方式

无限制接收

javascript 复制代码
props: ['name', 'sex', 'age']

限制数据类型接收

javascript 复制代码
props: {
  name: String,
  age: Number,
  sex: String
}

限制数据类型、默认值、是否必填接收:

javascript 复制代码
props: {
  name: {
    type: String,
    required: true // 是否必填
  },
  age: {
    type: Number,
    required: true // 是否必填
  },
  sex: {
    type: String,
    default: '保密' // 设置默认值
  }
}

context 参数中的 attrs 属性【子传父】

父组件:

html 复制代码
<template>
  <h1>我是子组件</h1>
  <p>姓名:{{ props.name }}</p>
  <p>性别:{{ props.sex }}</p>
  <p>年龄:{{ props.age }}</p>
</template>

<script>
export default {
  name: "Child",
  // 假设父组件传递了 name、age、sex 三个数据,props 只接收 name 数据
  props: ['name'],
  setup(props, context) {
    // 那么 props 未接收的数据会在 attrs 属性中显示
    console.log(context.attrs);
    // 返回数据
    return {
      props
    }
  }
}
</script>

效果:

context 参数中的 slots 属性【默认插槽】

父组件

html 复制代码
<template>
    <h1>我是父组件</h1>
    <hr />
    <Child>
        <p>姓名:{{ info.name }}</p>
        <p>年龄:{{ info.age }}</p>
    </Child>
</template>

<script>
import { reactive } from 'vue';
import Child from '../components/Child.vue';
export default {
    name: "Parent",
    components: { Child },
    setup() {
        let info = reactive({
            name: "张三",
            age: 18
        })
        // 返回数据
        return { info }
    }
}
</script>

子组件:

html 复制代码
<template>
  <h1>我是子组件</h1>
  <slot>默认值</slot>
</template>

<script>
export default {
  name: "Child",
  setup(props, context) {
    // 父组件传递过来的插槽内容,会存放在 slots 属性中
    console.log(context.slots);
  }
}
</script>

效果:

context 参数中的 emit 属性【子传父】

父组件

html 复制代码
<template>
    <h1>我是父组件</h1>
    <hr />
    <!-- 使用自定义事件 -->
    <Child @myEvent="myInfo"></Child>
</template>

<script>
import Child from '../components/Child.vue';
export default {
    name: "Parent",
    components: { Child },
    setup() {
        // 接收父组件传递的数据
        let myInfo = (value) => {
            alert(`我是父组件,我收到数据了,值为:${value}`);
        }
        // 返回数据
        return { myInfo }
    }
}
</script>

子组件:

html 复制代码
<template>
  <h1>我是子组件</h1>
  <button @click="test">往父组件中传递数据</button>
</template>

<script>
export default {
  name: "Child",
  // 声明自定义事件
  emits: ['myEvent'],
  setup(props, context) {
    let test = () => {
      // 调用自定义事件,语法为:context.emit('自定义事件', 值);
      context.emit('myEvent', 666);
    }
    // 返回数据
    return { test }
  }
}
</script>

效果

原创作者:吴小糖

创作时间:2023.10.26

相关推荐
小桥风满袖2 分钟前
极简三分钟ES6 - Promise
前端·javascript
breeze_whisper3 分钟前
当前端收到一个比梦想还大的数字:BigInt处理指南
前端·面试
小喷友4 分钟前
阶段四:实战(项目开发能力)
前端·rust
小高0074 分钟前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试
用户66982061129824 分钟前
vue3 hooks、utils、data这几个文件夹分别是放什么的?
javascript·vue.js
子兮曰5 分钟前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器
即兴小索奇9 分钟前
Google AI Mode 颠覆传统搜索方式,它是有很大可能的
前端·后端·架构
大虾写代码17 分钟前
nvm和nrm的详细安装配置,从卸载nodejs到安装NVM管理nodejs版本,以及安装nrm管理npm版本
前端·npm·node.js·nvm·nrm
星哥说事18 分钟前
下一代开源 RAG 引擎,让你的 AI 检索与推理能力直接起飞
前端
....49218 分钟前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js