vue3父子组件传值

已于 2023-12-24 21:45:08 修改
阅读量1.2k 收藏 19
点赞数 15
分类专栏： # vue教程 文章标签： javascript 前端 vue.js
于 2023-12-24 16:02:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40981804/article/details/135181567
版权

一、vuex 实现组件传值

父子，子子，祖孙

二、setup语法糖

<!-- 使用组件，通过 :自定义属性名="属性值" 的形式传递数据 -->
<!-- 属性值 是defineProps中的数据-->
<children :le="text" :list="list"></children>

情况一：父传子收

1、父组件传值
  • 解构抛出
<template>
    <div class="father">
        <h1>父组件</h1>
        <span>{{text}}</span>
    </div>
    <div class="box">
        <!-- 使用组件，通过 :自定义属性名="属性值" 的形式传递数据 -->
        <children :le="text" :list="list"></children>
    </div>
</template>
<script setup>
    // 引入
    import {reactive, toRefs,} from 'vue';
    // 引入组件
    import children from "./views/children";
    const data = reactive({
        text: '文字',
        list: [1, 2, 3, 4, 5]
    })
    // 解构抛出
    const {text, list} = toRefs(data)
</script>
<style scoped>
    .father {
        width: 100%;
        height: 200px;
        background: red;
    }

</style>
2、子组件
  • 通过defineProps（）可接收父组件传递的值；
  • type属性定义接受的数据类型；
  • default属性设置默认值，在当前属性没有值传入时使用；
<template>
    <div class="box">
        <h1>子组件</h1>
        <div>{{ le }}</div>
        <div v-for="item in list">{{ item }}</div>
    </div>
</template>
<script setup>
    // 引入
    import { defineProps } from 'vue';
    // 解构数据
    const { le, list } = defineProps({
        le: {
            type: String, // 接收的参数类型
            default: '默认文字', //默认值
        },
        list: {
            type: Array, // 接收的参数类型
            default: [], //默认值
        }
    })
</script>
<style scoped>
    .box{
        width: 100%;
        height: 200px;
        background: #25A4BB;
    }
</style>

情况二：子传父收

方法一 ：defineEmits 需要点击
1、 子组件传值
  • 调用defineEmits并定义要给父组件的方法，数组内可定义多个方法
  • 第一个参数为要传递的事件名，第二个参数为要传递的值
<template>
    <div class="box">
        <h1>子组件</h1>
        <div>{{ le }}</div>
        <button @click="giveFather">点击传值给父</button>
    </div>
</template>
<script setup>
    // 引入defineEmits
    import { reactive, defineEmits } from 'vue';
    // 接收defineEmits
    const emits=defineEmits()
    const data = reactive({
        text: '文字',
    })
    function giveFather() {
        // 第一个参数为要传递的事件名，第二个参数为要传递的值
        emits('giveFather', data.text)
    }

</script>
<style scoped>
    .box{
        width: 100%;
        height: 200px;
        background: #25A4BB;
    }
</style>
2、父组件接收
  • 父组件中使用自定义事件接收，自定义事件名称必须与子组件传递的一致(即等号前面名称)
  • 等号后面的事件名称可自行定义
  • 事件中通过默认参数接收使用子组件传递的值
<template>
    <div class="father">
        <h1>父组件</h1>
        <span>{{text}}</span>
    </div>
    <!-- 父组件中使用自定义事件接收，自定义事件名称必须与子组件传递的一致(即等号前面名称) -->
    <!-- 等号后面的事件名称可自行定义 -->
    <children @giveFather="receiveSon"></children>

</template>
<script setup>
    // 引入
    import {reactive, toRefs,} from 'vue';
    // 引入组件
    import children from "./views/children";

    const data = reactive({
        text: '',
    })

    function receiveSon(e) {
        // 通过默认参数接收使用子组件传递的值
        console.log(e);
        data.text = e
    }

    //解构数据
    const {text} = toRefs(data)

</script>
<style scoped>
    .father {
        width: 100%;
        height: 200px;
        background: red;
    }

</style>
方法二 ：defineExpose
1、子组件
<template>
    {{ name }}
</template>
<script setup>
    import { ref } from 'vue'
    const name = ref("张三")
    defineExpose({
        name
    });
</script>
5、父组件
  • children.value.name 必须在函数中
<template>
    <child ref="children"></child>
    <button @click="aaa"> 点击</button>
</template>
<script setup>
    import { ref } from 'vue'
    import child from './views/children'
    const children = ref(null)
    function aaa(){
        console.log(children.value.name)	// "张三"
        		// "我叫张三"
    }
</script>

三、setup 函数方式

情况一：父传子收

方法一 利用props 刷新便可以传值
1、父组件 —通过 :自定义属性名=“属性值” 的形式传递数据
//父组件
<template>
    <div class="father">
        <h1>父组件</h1>
        <span>{{text}}</span>
    </div>
    <div class="box">
        <!-- 使用组件，通过 :自定义属性名="属性值" 的形式传递数据 -->
        <children :le="text" :list="list"></children>
    </div>
</template>
<script>
    // 引入
    import { reactive, toRefs, } from 'vue';
    // 引入组件
    import children from "./views/children";
    export default {
        name: 'app',
        // 注册组件
        components: {
            children
        },
        setup() {
            const data = reactive({
                text: '文字',
                list: [1, 2, 3, 4, 5]
            })
            return {
                // 解构抛出
                ...toRefs(data),
            }
        }
    }
</script>
<style scoped>
    .father{
        width: 100%;
        height: 200px;
        background: red;
    }

</style>
2、 子组件接收
  • props接受父传递的数据；
  • type属性定义接受的数据类型；
  • default属性设置默认值，在当前属性没有值传入时使用；
//子组件
<template>
    <div class="box">
        <h1>子组件</h1>
        <div>{{ le }}</div>
        <div v-for="item in list">{{ item }}</div>
    </div>
</template>
<script>
    // 引入
    import { defineComponent } from 'vue';
    // 加上defineComponent()之后,可以获得vue2、vue3的自动提示---可有可无
    export default defineComponent({
        name: 'children',
        props: {
            le: {
                type: String, // 接收的参数类型
                default: '默认文字', //默认值
            },
            list: {
                type: Array, // 接收的参数类型
                default: []  //默认值
            }
        },
        // props 是一个对象，包含父组件传递给子组件的所有数据。
        // context ：上下文，包括 attrs 、 emit 、slots。
        setup(props, context) {
            console.log(props.le, props.list[0]);
        },
    })
</script>
<style scoped>
    .box{
        width: 100%;
        height: 200px;
        background: #25A4BB;
    }
</style>
方法二、 父组件中调用子组件的方法
1、父组件
<template>
	<helloworld ref ="val"/>//在父组件中找到子组件的节点
</template>
<script>
import {reactive,ref} from "vue"
import helloworld from "组件路径"
export default {
	compoents:{
		helloworld
	}，
	setup() {
		const val = ref()
		const p1 = reactive({name:"小宋",age:12})
		function btn(){//点击事件调用子组件的方法
			val.vlaue.receive(p1)
		}
		return{btn,val}
}
</script>
2、子组件
export default {
	name:"helloworld",
	setup(){
		//被父组件调用的方法
		function receive(val){
			console.log(val)
		}
		return{receive}
	}

情况二：子传父收

1、 子组件
  • setup函数中ctx的emit用于传递事件给父组件
  • 第一个参数为要传递的事件名，第一个参数为要传递的值
<template>
    <div class="box">
        <h1>子组件</h1>
        <button @click="giveFather">点击传值传给父</button>
    </div>
</template>
<script>
    // 引入
    import { reactive, defineComponent } from 'vue';
    // 加上defineComponent()之后,可以获得vue2、vue3的自动提示
    export default defineComponent({
        name: 'child',
        // props 是一个对象，包含父组件传递给子组件的所有数据。
        // ctx ：上下文，包括 attrs 、 emit 、slots。
        setup(props, ctx) {
            const data = reactive({
                text: '文字',
            })
            function giveFather() {
                // ctx中的emit用于传递事件给父组件
                // 第一个参数为要传递的事件名，第一个参数为要传递的值
                ctx.emit('giveFather', data.text)
            }
            return {
                // setup函数中定义事件需要抛出才能使用
                giveFather
            }
        },
    })
</script>
<style scoped>
    .box{
        width: 100%;
        height: 200px;
        background: #25A4BB;
    }
</style>
2、父组件接收
  • 父组件中使用自定义事件接收，自定义事件名称必须与子组件传递的一致(即等号前面名称)
  • 等号后面的事件名称可自行定义
  • 事件中通过默认参数接收使用子组件传递的值
<template>
    <div class="father">
        <h1>父组件</h1>
        <div>{{ cont }}</div>
    </div>
    <div class="box">
        <!-- 父组件中使用自定义事件接收，自定义事件名称必须与子组件传递的一致(即等号前面名称) -->
        <!-- 等号后面的事件名称可自行定义 -->
        <children @giveFather="receiveSon"></children>
    </div>
</template>
<script>
    // 引入
    import { reactive, toRefs, } from 'vue';
    // 引入组件
    import children from "./views/children";
    export default {
        name: 'app',
        // 注册组件
        components: {
            children
        },
        setup() {
            const data = reactive({
                cont: '',
            })
            function receiveSon(e) {
                // 通过默认参数接收使用子组件传递的值
                data.cont = e
            }
            return {
                // 解构抛出
                ...toRefs(data),
                // 抛出事件
                receiveSon
            }
        },

    }
</script>
<style scoped>
    .father{
        width: 100%;
        height: 200px;
        background: red;
    }

</style>

情况三：祖传孙收

1、祖组件----利用provide
//进入页面即刻传值
<template>
	<helloworld/>
</template>
<script>
import {reactive} from "vue"
import helloworld from "组件路径"
export default {
	compoents:{
		helloworld
	}，
	setup() {
		const p1 = reactive({name:"小宋",age:12})
		provide("p",p1)//祖传 第一个参数是子组件用来识别的参数
	}
}

//点击传值
2、子组件–inject
export default {
	name:"helloworld",
	setup(){
		const res = inject("p")//孙收
	}
xp_1711
关注
  • 15
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3父子组件传值.doc
02-05
在Vue3中，父子组件之间的通信方式相比Vue2有所改变，更加简洁且高效。本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. ...
详解Vue之父子组件传值
10-17
在Vue框架中，父子组件之间的通信是日常开发中常见的需求。本文将详细解析Vue中父子组件如何进行值的传递，主要包括传递数值、传递方法和传递对象三种方式。 **一、传递数值** 在Vue中，子组件通过`props`属性接收...
vue3父子组件之间的传值方式
larea的博客
03-27 527
下面的简单例子中，ChildA组件有一个按钮，当按钮被点击时，会触发一个名为 value-changed的事件，并将一个值传递给父组件。父组件的handleValueChanged方法会捕获这个事件，并将接收到的值存储在本地状态中，然后这个值会通过props传递给ChildB组件。在vue3中，可以使用props和emit来实现父子组件之间的通信。子组件可以使用emit发出一个事件，父组件监听这个事件，并将数据传递给另一个子组件。子组件ChildA.vue。子组件ChildB.vue。
vue3_组件间通信方式
最新发布
分享程序相关知识
06-03 1167
vue3组件通信。
Vue3 父子组件传值
新人一枚，互相学习哦！
06-13 4002
使用vue3进行父子组件传值
Vue3父子组件传值
闪电⚡之王的博客简介
08-15 1460
子组件通过setup（props，emit）第二个参数 emit 的emit方法，emit（‘自定义事件名称’，要传给父组件的值），然后在父组件中为子组件emit定义的自定义属性名称为一个事件，等于一个函数，函数的形参为子组件传过来的值。在父组件中给子组件自定义属性=要穿的值，子组件通过，props接受，然后在setup（props，emit）第一个参数中拿到props实例，props.传过来的自定义属性名称 就等于传过来的值了。...
vue3 父子组件传值
weixin_56848461的博客
09-23 427
vue3 父子传值方式之一
vue3 父子组件传值和方法
君子之学必日新，日新者日进也。不日新者必日退，未有不进而不退者
08-31 219
【代码】【无标题】
Vue3 父子组件传值和互调方法
y523648的博客
11-16 346
const to_child = reactive({//传给子组件的值，这里是对象，也可以传普通数据类型，数组等。子组件通过$emit('handleComp', 'a')调用父组件方法并传值(第二个参数为空则不传值)const handleComp= (param)=>{//传给子组件的方法，让子组件调用。let props = defineProps({//接收父组件传来的prop。console.log('子组件让我执行，传来参数' + param);//让父组件执行的方法。
vue3 父子组件传值通信
码农的专栏
07-16 240
代码】vue3父子组件传值通信。
Vue3 父子组件传值 ts
weixin_62364503的博客
09-16 5664
Vue3 父子组件传值 ts ，defineProps ，defineEmits
vue3父子组件传值；vue3子组件传值给父组件；vue3子组件监听父组件接口传值；父子组件事件调用
i_am_a_div的博客
08-09 1251
vue3父子组件传值；vue3子组件传值给父组件；vue3子组件监听父组件接口传值；父子组件事件调用
Vue非父子组件之间传值
01-08
然而，在实际应用中，我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被推荐的，因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”（或...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
【JavaScript源代码】vue3 父子组件传值详解.docx
12-29
Vue3 父子组件之间的通信是 Vue.js 开发中非常关键的一部分，相较于 Vue2，Vue3 在数据处理和响应式系统上进行了重大改进。在 Vue2 中，我们主要依赖 `props` 从父组件向子组件传递数据，并通过 `this.$emit` 事件...
iview ui框架
qq_40981804的博客
01-28 2023
前端框架 参考官网： https://www.iviewui.com/docs/introduce
新建vue3项目
qq_40981804的博客
12-17 1602
src文件夹是核心源代码的所在目录，展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的），正常开发的时候一般只修改​ src​ 文件夹下的文件。│　　　├──　​​router 目录 ​：用来存放 ​index.js​，用来配置路由，定义各个页面对应的URL。│　　　├── main.js​：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。│　　　├──​ app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。
vue3路由
qq_40981804的博客
12-18 1071
Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。vue路由库vue路由中文文档。
vue3 兄弟组件传值
10-08
在Vue.js中，兄弟组件之间传递数值可以通过以下几种方法实现： 1. 使用事件总线（Event Bus）：创建一个新的Vue实例作为事件总线，并在需要传递数据的组件中使用$emit触发事件，在接收数据的组件中使用$on监听事件并接收数据。 在父组件中创建一个事件总线： ```javascript // EventBus.js import Vue from 'vue' export const EventBus = new Vue() ``` 在发送数据的组件中使用$emit触发事件： ```javascript import { EventBus } from './EventBus.js' // ... EventBus.$emit('event-name', data) ``` 在接收数据的组件中使用$on监听事件并接收数据： ```javascript import { EventBus } from './EventBus.js' // ... mounted() { EventBus.$on('event-name', (data) => { // 处理接收到的数据 }) } ``` 2. 使用Vuex：Vuex是Vue.js的状态管理库，可以用于在组件之间共享和传递数据。你可以在Vuex store中定义一个状态，然后在需要传递数据的组件中通过mutations改变该状态，其他组件可以通过getters获取该状态的值。 3. 使用$attrs和$listeners：在Vue 2.x中可以使用$attrs和$listeners属性实现兄弟组件之间的传值。但是在Vue 3.x中，由于Composition API的引入，$attrs和$listeners属性在组件实例上已经不可用了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值