1,先在父组件的data里面 设置 number 的起始值=8。
2(1),将子组件引过来import Counter from "../components/Counter.vue"
。
2(2),注册组件components:{ "v-counter":Counter },"
。
2(3),在DOM结构里面应用这个组件<v-counter></v-counter>
。
3,然后设置一个自定义属性 :num <v-counter :num="number"></v-counter>
。
4,在子组件里面接收一下 props:['num'],
写在 export default { }
里面,容易犯错误写在外面。
5,发送 一个 事件 add
给 父组件this.$emit('add')
。子组件可以使用 $emit 向父组件发送自定义事件
6,父组件接收这个事件 @add="jia" @minus="jian"
<v-counter :num="number" @add="jia" @minus="jian"></v-counter>
7,在 methods 中定义这个方法
methods: {
jia(){
this.number++
},
jian(){
this.number--
}
}
* 注意:父组件中的 jia()方法,jian()方法 和 子组件的 jia()方法,jian()方法 两者之间是不发生关系的 , 可以不一致。。。。
父组件
<template>
<div id="about">
<v-counter :num="number" @add="jia" @minus="jian"></v-counter>
</div>
</template>
<script>
import Counter from "../components/Counter.vue"
export default {
components:{
"v-counter":Counter
},
data(){
return{
title:'标题党真可恶11',
number:8
}
},
methods: {
jia(){
this.number++
},
jian(){
this.number--
}
},
computed: {
},
watch: {
},
}
</script>
子组件
<template>
<div>
<div>Conunter</div>
<button @click="jia">+</button>
<button @click="jian">-</button>
<p>{{num}}</p>
</div>
</template>
<script>
export default {
props:['num'],
data() {
return {
}
},
methods: {
jia(){
this.$emit('add')
},
jian(){
this.$emit('minus')
}
},
}
</script>