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 组件中的数据传递方法, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/140091.htm