vue组件通信方式

父-->子(props)

// 静态
// parent.vue
<mime num-s="total"></mime>

//child.vue
props:['numS']

//动态
// parent.vue
<mime :num-a="total"></mime>

//child.vue
props:{
   numA:[ String , Number ]  //允许字符串 数字
}

子-->父

// parent.vue
<child @increment="change" :msg="msg"></child>
...
methods: {
    change(msg) {
        this.msg = msg;
    }
}

//child.vue
<div @click="up"></div>
...
methods: {
    up() {
        this.$emit('increment',data); //主动触发increment方法,data为向父组件传递的数据
    }
}

兄弟组件

// bus.vue
var bus = new Vue()  //创建事件总线

// A.vue
bus.$emit('id-selected', 1)

// B.vue
bus.$on('id-selected', function (id) {
    // ...
})

results for ""

    No results matching ""