Vue组件之间传值

Vue.js

父组件向子组件传值

若父组件中的值value1:'这是父组件中的值',要向子组件test传值。则在父组件中<test v-bind:parentValue="value1"></test>上绑定自定义属性名(parentValue)的值为value1;子组件中data下定义props的值为父组件里自定义的属性名(parentValue),即:props:['parentValue'],然后在子组件中就可以通过parentValue得到父组件的值了。

子组件向父组件传递数据

子组件主要通过事件传递数据给父组件,先在子组件中demo绑定触发事件(trigger),事件触发则执行(traggerevent)方法,再通过this.$emit('traggerevent')向父组件暴露接口:

trigger:function(){
     this.$emit('traggerevent',要传递的数据)
    }

在父组件中通过<demo v-on:traggerevent="自定义获取数据的方法getValue"></demo>,在父组件中通过监听traggerevent事件的触发再执行getValue方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容