App.vue
<template>
<div>
<h3>父组件</h3>
<p>当前的 num 值:{{ num }}</p>
<!-- 通过 @increment 监听子组件的 "increment" 事件 -->
<child-component @increment="numplus" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
num: 0
}
},
methods:{
numplus() {
this.num++;
}
}
}
</script>
ChildComponent.vue
<template>
<div>
<button @click="increment">增加父组件的num</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
// 触发自定义事件 "increment"
this.$emit('increment');
}
}
}
</script>
创建子组件
1首先要引入组件
2注册组件
3,拿注册的组件当标签在template中div盒子中使用
子组件当中
html
<template>
<div>
<button @click="increment">增加父组件的num</button>
</div>
</template>
javascript
export default {
methods: {
increment() {
// 触发自定义事件 "increment"
this.$emit('increment');
}
}
}
this.$emit('increment');用于与父组件进行通信。
父组件当中
html
<child-component @increment="numplus" />
子组件当中的button点击 就会触发