vue组件中的数据传递方法

网络编程 2024/11/17 佚名

3 2 1

小李飞刀资源网 Design By www.iooab.com

Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况：

父组件向子组件传递数据，通过 props 传递数据。

子组件向父组件传递数据，通过 events 传递数据。

两个同级组件之间传递数据，通过 event bus 传递数据。

一、父组件向子组件传递数据

子组件部分：

<template>
  <div class="child">
    {{ msg }}
  </div>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

在child.vue中，msg实在data中定义的变量，使用props：['msg']从父组件中获取msg的值

父组件部分：

<template>
  <div class="child">
    child
    <child :msg="message"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

在调用组件的时候，使用v-bind将msg的值绑定为parent.vue中定义的变量message，这样就能将parent.vue中的message的值传给child.vue了。

单项数据流

当父组件的 message 发生改变，子组件也会自动地更新视图。但是在子组件中，我们不要去修改 prop。如果你必须要修改到这些数据，你可以使用以下方法：

方法一：把 prop 赋值给一个局部变量，然后需要修改的话就修改这个局部变量，而不影响 prop

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

方法二：在计算属性中对 prop 进行处理

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

二、子组件向父组件传递数据

子组件主要通过实践传递数据给父组件的

子组件部分：

<template>
  <div class="child">
   <span>用户名：</span>
   <input v-model="username" @change="sendUser" />
  </div>
</template>

子组件的html中，当input中的值发生改变时，将username传递给parent.vue。

首先声明了一个sendUser方法，用change事件来调用sendUser。

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

在sendUser中，使用$emit来遍历changeName事件，并返回this.name，其中changeName是一个自定义的事件，功能类似于一个中转，this.name将通过这个事件传递给父组件。

父组件部分：

<template>
  <div class="parent">
    <child @changeName="getUser"></child>
    <p>用户名：{{user}}</p>
  </div>
</template>

在父组件中声明了一个getUser方法，用changeName事件调用getUser方法，获取从子组件传递过来的参数username

<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
   this.user = data
  }
 }
}
</script>

getUser方法中的参数msg就是从子组件中传递过来的参数uesrname。

三、同级组件间的数据传递

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

<template>
  <div id="app">
    <c1></c1>  //组件1
    <c2></c2> //组件2
  </div>
</template>

组件c1中：

<template>
  <div class="c1">
    page
    <button @click="changeMsg">click</button>
  </div>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
export default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //点击按钮，将this.message传递给c2
   bus.$emit('sendMsg', this.message)
  }
 }
}
</script>

组件c2中：

<template>
  <div class="c2">
    {{msg}}
  </div>
</template>

<script>
var Bus = new Vue();

export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data即为c1组件中的message
   this.msg = data
  })
 }
}
</script>

在实际运用中，一般将bus抽离出来：

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

组件调用时引用（import Bus from './Bus.js'）

但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信
实际运用：

将Bus注入到Vue根对象中

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　
})

在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用

总结

以上所述是小编给大家介绍的vue组件中的数据传递方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vue,组件数据传递,vue父子组件传递数据

标签：

vue,组件数据传递,vue父子组件传递数据

小李飞刀资源网 Design By www.iooab.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

小李飞刀资源网 Design By www.iooab.com

评论“vue组件中的数据传递方法”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

vue组件中的数据传递方法

一、父组件向子组件传递数据

二、子组件向父组件传递数据

三、同级组件间的数据传递

vue,组件数据传递,vue父子组件传递数据

基于Vue2x的图片预览插件的示例代码

vue如何在自定义组件中使用v-model

评论“vue组件中的数据传递方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接