美文网首页
vue组件中的数据传递

vue组件中的数据传递

作者: 晴_eeca | 来源:发表于2018-05-14 14:10 被阅读97次

    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组件中的数据传递

          本文链接:https://www.haomeiwen.com/subject/ygpddftx.html