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

父组件向子组件传参

首先我们创建名字为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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容