vue组件之间的传值

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
组件传参:组件实例的作用域是孤立的。这意味着不能在子组件的模块中直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递。如在父组件中向子组件传值:<headerBar message = “hello” />在子组件中需要使用props获取到父组件的传值:props: [‘message’]子组件向父组件传递数据,如当input发生变化...

组件传参:
组件实例的作用域是孤立的。这意味着不能在子组件的模块中直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递。
如在父组件中向子组件传值

<headerBar message = “hello” />

在子组件中需要使用props获取到父组件的传值:

props: [‘message’]

子组件向父组件传递数据,如当input发生变化时,向子组件传name值:

<input v-model = “name” @change = “setName” />
    methods: {
        setName: function(){
            this.$emit(‘transferName’,this.name)
        }
    }

在父组件中获取数据:

<headerBar @transferName = “getName”/>
    methods: {
        getName: function(msg){
            this.user = msg
        }
    }

子子组件传递数据
子组件之间不能相互传值,那么必须依靠父组件来进行值的传递,即子组件的值传递到父组件,再由父组件传递到另一个子组件。
如我们定义一个data,让它从子组件向父组件传递:

let data = {
    iss: this.iss
    con: this.textContent
    url: this.upImgUrl
}
this.$emit('listen',data)

在父组件中接收数据:(注意标签issue是写在父组件中的一个子组件)

<issue v-show="index == 0" v-on:listen="listenMsg"/>

因为子组件中发送了一个listen事件,则在使用子组件时需要借用这个listen事件:

listenMsg(data){
     this.postData = data;
}

在父组件中定义postData获取到数据。
从父组件向另一个子组件传递值:

<circlepage v-show="index == 1" :data="postData"/>

在circle中获取值,但是如果直接在mounter中获取值,则只能获取到原始值,并不能监测到另一个子组件传递过来的值,所以我们需要在watch中来获取数值:

props: [‘data’],
    watch: {
        data(newVal){
            this.circleList.unshift(newVal);
        }
    }

这样,我们完成了子组件与父组件,父组件与子组件的传值。

作者:rookie.he(kuke_kuke)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!

你可能在找的问题:

vue教程

Vue页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部