vue：知识点1 修改全局数据变量 data的数据双向绑定

 

 

 

 如何处理，使用bus

 

新建一个js
var BUS = {}
BUS.install = function(Vue, options){
	const _bus = new Vue({
		data : {
			num : 108
		},
		created(){//不能写在mounted中因为是空vue没地方挂载。BUS并没有走vue的其他周期函数！！
			this.$on("add",function(num){
	        	this.num += num
	      	})
		},
	})
	Vue.prototype.$Bus = _bus
}
export default BUS

页面使用

<template>
    <div id="page">
        <p>
            <span>全局Bus属性跟着修改为：{{msg}}</span> 
            <br/>           
            <button @click=globalFunc>修改全局Bus属性</button>
        </p>
    </div>
</template>

<script>
    import Vue from 'vue'

    export default {
        name: "pagePlugin",
        data() {
            return {
            }
        },
        computed:{
            msg :  function(){
                return this.$Bus.num
                //return this.$EventBus.busData
                //return this.$root.$children[0].num
                //return this.__proto__.$arr.num
            }
        },
        methods:{
            globalFunc(){        
                this.$Bus.$emit('add',120)
            },
        },        
    }
</script>

<style scoped>
    button{
    border: none;
    background-color: #83d3f9;
    margin: 10px;
    color: #fff;
    height: 34px;
    padding: 0 10px;
    border-radius: 5px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    }
</style>