Vue.js中组件通信的方法

  1. 父子组件的通信方法
    首先父组件需要v-bind绑定数据,在子组件中用props进行接收数据,这样,父组件中的数据变动时,就可以即时通知到子组件
    子组件如果要与父组件进行通信的话,子组件需要自定义事件$emit,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件
// parent.vue
<template>
    <div class="parent">
        <p>父亲:给你{{ money }}元零花钱</p>
        <kid :money=" money" @repay="repay"></kid>
        <br>
        <button @click="add">那给你加100</button>
        <p v-if="back" @repay="repay">儿子:超过300我不要,还给你 {{ back }}元</p>
    </div>
</template>
<script>
export default {
    name: 'parent',
    data () {
        return {
            money: 100,
            back: 0
        }
    },
    components:{ kid },
    methods:{
        repay (back) {
            this.back = back
        },
        add(){
            this.money += 100;
        }
}
</script>

2.爷孙组件的通信是一级级上传,并不会冒泡,也就是说最底层需要一层层向外通知才可以到达最外层

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

推荐阅读更多精彩内容

  • 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互...
    开车去环游世界阅读 314评论 0 2
  • 9.1 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,...
    白水螺丝阅读 829评论 0 2
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,411评论 0 3
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,268评论 0 6
  • 父子组件通信 1、父子组件通过prop传递数据 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数...
    视觉派Pie阅读 1,291评论 0 18