<body>
<div id="app">
<goods :name='name' :price='price' :num='num'></goods>
<!--進行原始的點擊事件 局部注冊-->
</div>
</body>
var vm = new Vue({
el: "#app",
data: {
name: "蘋果",
price: 10,
num: 1
},
components:{
"goods":goods
}
});
var goods = {
template: "<div><p>名字:{{name}}</p><p>價格:{{price}}</p><p>數量:{{num}}</p><p>總價:{{totle}}</p><br /><button @click='jia' >+</button><br /><button @click='jian'>-</button></div>",
props: ["name",'price','num'],
computed:{
totle:function(){
console.log(this)
return this.num*this.price
}
},methods: {
jia: function() {
this.$parent.num++ zhixiang指向vm.num
},
jian: function() {
this.$parent.num--
}
}
}