~~~
<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
}
~~~
