<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
<div id="app">
<div>{{ning}}</div>
<lin @lxy="addVal"></lin>
<lin @lxy="addVal"></lin>
</div>
<script>
var returnObj={fnn:0}
Vue.component("lin",{
template:"<button @click='xnn'>{{fnn}}</button>",
//第一种,返回函数
data : function(){ //组件中的data必须是函数,这样组件不相互影响,这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝
return {
fnn:0
}
},
//第二种,返回对象,
data : function(){ //data 选项是一个对象,会影响到其他实例
return returnObj
},
methods:{
xnn:function(){
this.fnn +=1;
this.$emit("lxy")
}
}
})
new Vue({
el:"#app",
data:{
ning:0
},
methods:{
addVal:function(){
this.ning +=1
}
}
})
</script>