Vue3组件间的传值案例（props，emit，ref，attrs，inject在setup script标签两个场景中的使用）

已于 2022-11-14 19:46:56 修改
阅读量2.8k 收藏 8
点赞数 2
分类专栏： vue 文章标签： javascript vue.js 前端
于 2022-10-06 20:55:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54334713/article/details/127187566
版权

Vue3组件间的传值案例

一.知识补充

如下整理了，Vue3传值过程中，props，emit，ref，attrs，inject在setup script 标签中和不在setup script 标签中的案例

1.setup

setup 方法接受两个参数 setup(props, context)

props 是父组件传给组件的数据

context(上下文) 中包含了一些常用属性：

  • attrs 表示由上级传向该组件，但并不包含在 props 内的属性
<!-- parent.vue -->
<Child msg="hello world" :name="'child'"></Child>

/* child.vue */
export default {
  props: { name: String },
  setup(props, context) {
    console.log(props) // {name: 'child'}
    console.log(context.attrs) // {msg: 'hello world'}
  },
}
  • emit用于在子组件内触发父组件的方法
<!-- parent.vue -->
<Child @toggle="toggle"></Child>

/* child.vue */
export default {
  setup(_, context) {
    context.emit('toggle')
  },
}
  • slots用来访问被插槽分发的内容，相当于 vm.$slots
<!-- parent.vue -->
<Child>
  <template v-slot:header>
    <div>header</div>
  </template>
  <template v-slot:content>
    <div>content</div>
  </template>
  <template v-slot:footer>
    <div>footer</div>
  </template>
</Child>

/* child.vue */
export default {
  setup(_, context) {
    const { header, content, footer } = context.slots
    return () => h('div', [h('header', header()), h('div', content()), h('footer', footer())])
  },
}

2.script setup

script setup是 Vue3 的一个新语法糖，相比于普通的语法，简化了组合式API必须return的写法，拥有更好的运行时性能。

  1. 声明的内容可以直接在模板中使用
  2. 自动注册组件
  3. 动态组件，应该使用动态的:is来绑定
  4. 必须使用 defineProps 和 defineEmits API 来声明 props 和 emits
  5. script setup的组件是默认关闭的，需要defineExpose明确要暴露的属性
  6. 通过 useSlots 和 useAttrs 两个辅助函数使用slots和 attrs
  7. script setup中可以使用顶层 await。结果代码会被编译成 async setup()

3.attrs 属性可以看做 props 的加强版

区别：

  1. props 要先声明才能取值，attrs 不用先声明
  2. props 声明过的属性，attrs 里不会再出现
  3. props 不包含事件，attrs 包含
  4. props 支持 string 以外的类型，attrs 只有 string 类型
    （具体可见官网）

二.案例

💥prps

✨方式一
父组件
<template>
    <div>
        我是父组件
        <!-- 传递给子组件 -->
        <ChildrenVue :msg='msg' />
    </div>
</template>
<script>
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
export default {
    //注册子组件
    components: {
        ChildrenVue
    },
    setup() {
        //向子组件传递的参数
        const msg = ref('哈喽哈喽')
        return {
            msg
        }
    }
}
</script>
子组件
<template>
    <div>
        我是子组件
        <!-- 使用参数 -->
        <h1> {{msg}}</h1>
    </div>
</template>
<script>
export default {
    //接收参数
    props: ['msg'],
    setup(props) {
        //获取父组件传递的参数
        const msg = props.msg
        console.log(props.msg);
        return {
            msg
        }
    }
}
</script>
✨方式二
父组件
<template>
    <div>
        我是父组件
        <!-- 传递给子组件 -->
        <ChildrenVue :msg='msg' />
    </div>
</template>
<script setup>
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
// 传递参数
const msg = ref('哈喽哈喽')
</script>
子组件
<template>
    <div>
        我是子组件
        <!-- 使用参数 -->
        <h1> {{msg}}</h1>
    </div>
</template>
<script setup>
const props = defineProps({
    // 写法一
    // msg: String
    //写法二
    msg: {
        type: String,
        default: ''
    }
})
console.log(props.msg);
</script>

💥emit

✨方式一
父组件
<template>
    <div>
        我是父组件
        <ChildrenVue @myClick='onMyClick' />
    </div>
</template>
<script setup>
import ChildrenVue from '../components/Children.vue';
//父组件定义自定义事件onMyClick
//监听子组件的自定义事件myClick
const onMyClick = (msg) => {
    //获取参数
    console.log(msg);
}
</script>
子组件
<template>
    <div>
        我是子组件
        <button @click="handleClick">按钮</button>
    </div>
</template>
<script setup>
import { defineEmits } from 'vue'
//获取emit
const emit = defineEmits()
//定义点击事件handleClick
//定义自定义事件myClick
//传递信息
const handleClick = () => {
    emit('myClick', '我是子组件给父组件的')
}
</script>
✨方式二
父组件
<template>
    <div>
        我是父组件
        <ChildrenVue @myClick='onMyClick' />
    </div>
</template>
<script>
//引入子组件
import ChildrenVue from '../components/Children.vue';
export default {
    //注册
    components: {
        ChildrenVue
    },
    setup() {
        //定义自定事件触发子组件，获取信息
        const onMyClick = (msg) => {
            console.log(msg);
        }
        return {
            onMyClick
        }
    }
}
</script>
子组件
<template>
    <div>
        我是子组件
        <button @click="handleClick">按钮</button>
    </div>
</template>
<script>
export default {
    setup(props, context) {
        const handleClick = () => {
            context.emit('myClick', '我是子组件给父组件的')
        }
        return {
            handleClick
        }
    }
}
</script>

💥ref

✨方式一
父组件
<template>
    <div>
        我是父组件
        <!-- 定义ref 获取子组件的属性和方法 -->
        <ChildrenVue ref='childrenRef' />
        <button @click="show">获取子组件的属性和方法</button>
    </div>
</template>
<script>
//引入子组件
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
export default {
    //注册
    components: {
        ChildrenVue
    },
    setup() {
        //声明子组件的ref
        const childrenRef = ref(null)
        const show = () => {
            //使用子组件的属性和方法
            //通过 ref.value.子组件的属性or方法
            console.log(childrenRef.value.title);
            childrenRef.value.toggle()
        }
        return {
            childrenRef,
            show
        }
    }
}
</script>
子组件
<template>
    <div>
        我是子组件
    </div>
</template>
<script>
export default {
    setup() {
        const title = '我是子组件的属性'
        const toggle = () => {
            console.log('我是子组件的方法');
        }
        return {
            title,
            toggle
        }
    }
}
</script>
✨方式二
父组件
<template>
    <div>
        我是父组件
        <!-- 定义ref 获取子组件的属性和方法 -->
        <ChildrenVue ref='childrenRef' />
        <button @click="show">获取子组件的属性和方法</button>
    </div>
</template>
<script setup>
//引入子组件
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
//声明子组件的ref
const childrenRef = ref(null)
const show = () => {
    //使用子组件的属性和方法
    //通过 ref.value.子组件的属性or方法
    console.log(childrenRef.value.title);
    childrenRef.value.toggle()
}
</script>
子组件
<template>
    <div>
        我是子组件
    </div>
</template>
<script setup>
const title = '我是子组件的属性'
const toggle = () => {
    console.log('我是子组件的方法');
}
defineExpose({
    // 将想要暴露的属性和方法名称
    title, toggle
})
</script>

💥attrs

✨方式一
父组件
<template>
    <div>
        我是父组件
        <ChildrenVue :msg='msg' />
    </div>
</template>
<script setup>
//引入子组件
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
const msg = ref('我是父组件传递的信息')
</script>
子组件
<template>
  <div>
    我是子组件
    {{ attrs.msg }}
  </div>
</template>
<script setup>
import { useAttrs } from "vue";
const attrs = useAttrs();
console.log(attrs.msg);
</script>
✨方式二
父组件
<template>
  <div>
    我是父组件
    <ChildrenVue :msg1="msg1" :name="msg2" @click="toggle"/>
  </div>
</template>
<script>
import ChildrenVue from "../components/Children.vue";
import { ref } from "vue";
export default {
  components: { ChildrenVue },
  setup() {
    const msg1 = ref("我是父组件传递的信息1");
    const msg2 = ref("我是父组件传递的信息2");
    //传递的方法
    const toggle = () => {
      console.log("hhhhh");
    };
    return {
      msg1,
      msg2,
      toggle,
    };
  },
};
</script>
子组件
<template>
  <div>
    我是子组件
    {{ name }}
  </div>
</template>
<script>
export default {
  props: { name: String },
  setup(props, context) {
    //props传递的参数    name:'我是父组件传递的信息2'
    console.log(props);
    //attrs传递的参数    msg1: '我是父组件传递的信息1'
    console.log({ ...context.attrs });
  }
};
</script>

💥inject

父组件
<script setup>
   import { provide } from "vue"
   provide("name", "hello")
</script>
子组件
<script setup>
   import { inject } from "vue"
   const name = inject("name")
   console.log(name) // hello
</script>
明月落乌江
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3----props和emit的使用
测试
12-20 8964
props和emit
vue3 ref 传参
m0_50080847的博客
12-23 1630
1 子组件 Demo 里： <script setup> import {ref} from 'vue' let ceshi = ref(520) defineExpose({ // 通过 defineExpose 将 子组件 内部 数据 暴露给 父组件 ！！！！ ceshi }) </script> 2 父组件： <template> ...
Vue3 中 props 与 emit 用法
最新发布
笔记、经验、日常分享
06-15 532
在 Vue3 中，`props` 和 `emit` 的用法有所改变，主要的变化在于它们现在都通过 `setup` 函数来访问和使用。
【精讲】vue框架 vue组件中的ref、props传值并修改、混合（子组件重复部分利用混合可以减少代码量的重复编写）
m0_59505309的博客
08-04 3143
【精讲】vue框架 vue组件中的ref、props传值并修改、混合（子组件重复部分利用混合可以减少代码量的重复编写）
vue3 ref实现父子组件传值
zmy967131的博客
12-06 383
vue3 ref 实现父子组件传值（父给子传值）
VUE3 ref，props，生命周期
TA016422的博客
04-23 962
/ let person:PersonInter = {id:'asyud7asfd01',name:'张三',age:60}-- <h2 a="1+1" :b="1+1" c="x" :d="x" ref="qwe">测试</h2> -->list:()=> [{id:'ausydgyu01',name:'康师傅·王麻子·特仑苏',age:19}]{id:'asyud7asfd01',name:'张三',age:60},{id:'asudfysafd01',name:'张三',age:18},
Vue组件通信$attrs、$listeners实现原理解析
10-14
在开发过程中，组件间的通信是必不可少的，Vue 提供了多种通信机制，如 props、事件 emit、Vuex、Event Bus 以及 provide/inject 等。在这些机制中，`$attrs` 和 `$listeners` 是一种相对隐式且灵活的通信方式，它们...
vue组件间通信六种方式（总结篇）
10-17
本篇文章将详细介绍 Vue 组件间通信的六种主要方式，并通过实例解析它们的使用场景和差异。 1. **Props / `$emit`** - **Props** 是父组件向子组件传递数据的主要方式。父组件通过在子组件标签上使用 `v-bind:...
vue组件之间通信方式实例总结【8种方式】
10-17
在Vue.js中，组件间的通信是构建复杂应用的关键。以下将详细解析8种常见的Vue组件通信方式： 1. **Props和$emit** - 父组件向子组件传递数据是通过`props`属性进行的。在子组件中，可以通过`props`定义接收的属性...
Vue.js 父子组件通信的十种方式
10-17
在Vue应用中，组件是构建复杂UI的基本单元，而父子组件间的通信是组件化开发中常见的需求。本文将详细介绍Vue.js中实现父子组件通信的十种方法。 1. **Prop** Prop 是 Vue 中最基础的数据传递方式，允许父组件向子...
Vue3 之 透传 Attributes，$attrs
zheng_jia_jun的博客
08-11 4091
透传 attribute” 指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。如果组件里面没有根节点，vue 将不会自动 attribute 透传行为，并且里面将会抛出一个警告，需要在组件中规定哪个组件使用 $attrs 透传 attribute。同样的 v-on 绑定事件，父组件跟 组件根组件都同时监听同一个事件的话，事件触发，对应监听的方法都会执行。现在我们想要父组件传递的属性，不在组件内根组件继承，在根组件里面的子组件基础。..
VUE3 单页面组件之间的传值 详解
06-21 3205
VUE3 单页面组件的定义和组件之间的传值详解。需要注意的事项
Vue3:插槽（slot，useSlots，useAttrs）
weixin_62364503的博客
09-21 5526
Vue3：插槽（$attrs，$slots），取消了Vue2中的$listeners
vue3组件通信 组件间传值
localhost
05-28 638
使用API选项时，我们可以通过this.$refs.name获取指定的元素或组件，但在组合API中不行。注意：默认情况下，setup 组件是关闭的，通过模板 ref 获取组件的公共实例。注意：使用 provide 进行数据传输时，尽量使用 readonly 封装数据，避免子组件修改父组件传递的数据。点击子组件中的【添加】按钮后，我们会发出一个自定义事件，并将添加的值作为参数传递给父组件。在父组件中，只需要监听子组件的自定义事件，然后执行相应的添加逻辑即可。在需要暴露交流事件的组件里，通过。
VUE3传值相关六种方法
weixin_51263829的博客
01-29 1万+
父传子，子传父
Vue3 props用法
用心创作每一篇文章
11-06 1696
【代码】Vue3 props用法。
vue3 组件传值的几种方式
热门推荐
weixin_45885731的博客
09-07 1万+
第一种： 父类传子类。 // 父组件 <template> <son :isShow="data.isShow"></son> </template> <script> import son from '../components/son.vue' import { reactive } from 'vue' // 千万别忘记了 这个导入 export default { components: { ...
Vue3 setup中父组件使用ref取子组件传的值并解决报错：类型“never”上不存在属性“xxx”。
yyzx_yyzx的博客
08-12 5209
1.首先在子组件中使用defineEmits定义emit并定义事件名称，然后定义传值的方法，通过例如点击来触发方法从而调用emit来把值绑到事件上传给父组件。并且在最后通过defineExpose({})来暴露你想给ref看到的值 2.父组件中通过在子组件标签内使用@来接收事件，并且给子组件使用ref赋值，然后在setup中使用ref(null)声明该值。接收事件后触发的方法中使用 ref赋值.value.['值'] 来接收子组件传过来的值。在本文中为Sons.value.['toF']。...
Vue3复习和总结(Component)组件间四种数据传递的方式与插槽,props、emit、ref
zyugat的博客
11-16 4223
Vue3复习和总结(Component)组件间三种数据传递的方式与插槽,props、emit、ref 代码全部放在->github仓库：https://github.com/zyugat/vue-review-all 前言：分为base、Component、router、Vuex、组合式API。5各部分。 base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli 组件间三种数据传递的方式与插槽Vue3复习和总结(Component)组件间三种数据传递的方式与插槽
在vue3中把一个vue大组件拆分成几个小的组件怎么传值
05-05
在 Vue 3 中，可以通过 `props`、`emit` 和 `provide / inject` 三种方式来实现组件之间的数据传递。 1. 使用 `props` 传递数据 在父组件中使用 `props` 属性来传递数据，子组件中通过 `props` 接收数据。父组件可以在子组件中使用 `v-bind` 来绑定数据。 ```vue <!-- 父组件 --> <template> <div> <ChildComponent :message="msg" /> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent, }, data() { return { msg: "Hello, World!", }; }, }; </script> <!-- 子组件 --> <template> <div> {{ message }} </div> </template> <script> export default { props: { message: String, }, }; </script> ``` 2. 使用 `emit` 传递事件 在子组件中使用 `$emit` 方法触发事件，父组件中可以通过 `v-on` 监听事件并处理。 ```vue <!-- 子组件 --> <template> <div> <button @click="sendMessage">发送消息</button> </div> </template> <script> export default { methods: { sendMessage() { this.$emit("send", "Hello, World!"); }, }, }; </script> <!-- 父组件 --> <template> <div> <ChildComponent @send="handleSend" /> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent, }, methods: { handleSend(message) { console.log(message); // 输出：Hello, World! }, }, }; </script> ``` 3. 使用 `provide / inject` 提供和注入依赖 `provide / inject` 可以在祖先组件中提供数据，在后代组件中注入数据，可以跨越多个层级传递数据。 ```vue <!-- 祖先组件 --> <template> <div> <GrandchildComponent /> </div> </template> <script> import { provide } from "vue"; import ChildComponent from "./ChildComponent.vue"; export default { components: { GrandchildComponent, }, setup() { const message = "Hello, World!"; provide("message", message); }, }; </script> <!-- 子组件 --> <template> <div> <ChildComponent /> </div> </template> <script> import { inject } from "vue"; import GrandchildComponent from "./GrandchildComponent.vue"; export default { components: { GrandchildComponent, }, setup() { const message = inject("message"); return { message }; }, }; </script> <!-- 后代组件 --> <template> <div> {{ message }} </div> </template> <script> export default { setup(props, { attrs, slots, emit }) { const message = inject("message"); return { message }; }, }; </script> ``` 以上是三种常见的组件之间数据传递方式，在实际开发中可以根据具体情况选择合适的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明月落乌江

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值