vue里面数据传值的方式

文章介绍了在Vue中如何通过props从父组件向子组件传递数据,以及使用$emit从子组件向父组件发送事件和数据。子组件通过定义props接收属性,父组件通过@事件监听来响应子组件的变更。此外,还提及了兄弟组件间传递值的一种场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

父传子   props

引入子组件,在子组件的里面自定义一个属性xxx传递父页面里面的数据。然后再子页面里面用props接收这个数据

父组件:

自定义一个属性xxx传递父组件的数据

<Header :xxx="msg" ></Header>

子组件:

用props接收定义的属性

props:['xxx']

具体是

父组件:

 子组件:

 子传父    $emit

子组件用$emit传递数据,父组件用

子组件:

this.$emit("自定义事件名称",要传的数据)

this.$emit("change",this.changeVal)

父组件:

就是在引入子组件的那部分@子组件定义的事件名=“自己再定义的事件”

<Header @change="getData"></Header>


 methods: {
        // changeVal这个参数就子组件要穿的数据
        getData(changeVal) {
            this.zdata=changeVal
        }
    },

具体事例

子组件

 父组件

 兄弟组件传值

(8条消息) 兄弟组件传值(同时解决接受的页面收不到数据)_y叽里咕噜的博客-CSDN博客

Vue 框架中,父子组件之间的数据递是开发中非常基础且常见的需求。以下是实现父子组件的几种主要方法: ### 1. 父组件向子组件(props) 父组件通过 `props` 向子组件数据。这是最常见的单向数据方式。 - **父组件**通过绑定属性的方式数据递给子组件: ```html <template> <div> <!-- 父组件向子组件数据 --> <ChildComponent :message="parentMessage" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: '这是来自父组件的消息' }; } }; </script> ``` - **子组件**通过 `props` 接收父组件递的数据: ```html <template> <div> {{ message }} </div> </template> <script> export default { props: { message: { type: String, required: true } } }; </script> ``` ### 2. 子组件向父组件($emit) 子组件可以通过 `$emit` 触发自定义事件,并将数据递给父组件。 - **子组件**触发事件并数据: ```html <template> <button @click="sendToParent">点击向父组件</button> </template> <script> export default { methods: { sendToParent() { const childData = '这是来自子组件的数据'; this.$emit('child-to-parent', childData); } } }; </script> ``` - **父组件**监听子组件的事件并处理递的数据: ```html <template> <div> 父组件接收到子组件的数据:{{ receivedData }} <ChildComponent @child-to-parent="handleChildData" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { receivedData: '' }; }, methods: { handleChildData(data) { this.receivedData = data; } } }; </script> ``` ### 3. 父组件将数据给子组件的内部变量 在某些情况下,父组件递的 `props` 数据可能需要赋给子组件的内部变量,以便在组件内部进行操作。 - **子组件**在 `created` 或 `mounted` 生命周期钩子中接收 `props` 并赋给内部变量: ```html <template> <div> 子组件内部数据:{{ internalData }} </div> </template> <script> export default { props: { externalData: { type: Object, required: true } }, data() { return { internalData: {} }; }, created() { this.internalData = this.externalData; } }; </script> ``` ### 4. 使用.sync 修饰符实现双向绑定 Vue 提供了 `.sync` 修饰符,允许子组件直接修改父组件递的,从而实现一种轻量级的双向绑定。 - **父组件**使用 `.sync` 修饰符数据: ```html <template> <ChildComponent :value.sync="parentValue" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentValue: '初始' }; } }; </script> ``` - **子组件**修改 `.sync` 绑定的: ```html <template> <div> <input v-model="value" @input="updateValue" /> </div> </template> <script> export default { props: { value: { type: String, required: true } }, methods: { updateValue(event) { this.$emit('update:value', event.target.value); } } }; </script> ``` ### 5. 使用 v-model 实现双向绑定 `v-model` 是 Vue 提供的一种语法糖,用于简化表单输入与组件数据之间的双向绑定。 - **子组件**使用 `v-model`: ```html <template> <input :value="value" @input="$emit('input', $event.target.value)" /> </template> <script> export default { props: ['value'] }; </script> ``` - **父组件**使用 `v-model` 绑定子组件: ```html <template> <ChildComponent v-model="parentValue" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentValue: '初始' }; } }; </script> ``` ### 6. 使用事件总线(Event Bus)进行跨组件通信 虽然主要用于非父子组件之间的通信,但事件总线也可以用于父子组件之间的数据递,尤其是在复杂场景中。 - **创建事件总线**: ```javascript // event-bus.js import Vue from 'vue'; export const EventBus = new Vue(); ``` - **子组件**发送事件: ```javascript import { EventBus } from './event-bus.js'; export default { methods: { sendData() { EventBus.$emit('data-from-child', '子组件数据'); } } }; ``` - **父组件**监听事件: ```javascript import { EventBus } from './event-bus.js'; export default { mounted() { EventBus.$on('data-from-child', (data) => { console.log('接收到子组件数据:', data); }); } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值