~~~
<div id="app">
<like :param="count"></like>
</div>
<template id="like">
<button @click="add">{{num}}</button>
</template>
<script>
// vue中不允許直接更改父組件傳遞過來的參數
Vue.component('like',{
template:"#like",
props:{
param:Number
},
data(){
return {
num:this.param
}
},
methods:{
add(){
this.num++;
}
}
})
new Vue({
el:"#app",
data:{
count:0
}
})
~~~
~~~
//技術要點
<like :param="count"><like>
1.like組件通過:param接收父組件傳遞的參數
2.要在子組件的props屬性中注冊
props:{
count:Number
}
3.不能直接修改從父組件中傳遞過來的參數,可以使用子組件的data進行中轉
data(){
num:this.param
}
~~~
