美文网首页Vue.js专区
vue中子组件父组件之间如何传参?

vue中子组件父组件之间如何传参?

作者: _conquer_ | 来源:发表于2017-11-02 12:13 被阅读0次

    父组件向子组件传参

    首先我们创建名字为todo-item的子组件

    Vue.component('todo-item', {
        template: '<p>{{message}}</p>',
         props:['message']
    })
    

    父组件为
    html部分

    <div id="container">
        <h2>parent父组件部分</h2>
            <!--message用来接收父组件a的值-->
        <todo-item  v-bind:message="a"></todo-item>
        <div >{{a}}</div>
    </div>
    

    js部分

    var vm = new Vue({
        el:'#container',
            data:{
                a:'父组件里面的div',
            }
    })      
    

    子组件向父组件传参

    //子组件部分
        Vue.component('todo-item', {
              template: '<p>{{message}}</p>',
              data(){
                return {
                    message:'组件下面的a'
                }
              },
              mounted:function(){
                //子组件通过$emit触发父组件的listenTo事件
                this.$emit('ievent',this.message);
              },
            })
    

    父组件为
    html部分

    <div id="container">
        <h2>child子组件部分</h2>
        <todo-item  @ievent="listenTo"></todo-item>
        <div >{{a}}</div>
    </div>
    

    js部分

          var vm = new Vue({
                el:'#container',
                data:{
                    a:0,
                },
                methods:{
                    listenTo:function(message){
                        this.a=message;
                    }
                }
            })  
    

    再说一个非常方便的v-ref

    <div id="parent">
            <user-profile ref='profile'></user-profile>
            <p>{{number}}</p>
       </div>   
        <script>
            Vue.component('user-profile', {
                template: '<span>{{ msg }}</span>',
                data: function () {
                    return {
                        msg: 123
                    }
                }
            })
             new Vue({
                el: '#parent',
                data:{
                    number:1
                },
                 mounted:function () {
                        this.number=this.$refs.profile.msg;
                    }
             });
        </script>
    

    相关文章

      网友评论

        本文标题:vue中子组件父组件之间如何传参?

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