代理好项目_合肥网站建设模板_搜索引擎优化方法有哪些_品牌策划案

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盒子中使用

子组件当中

<template><div><button @click="increment">增加父组件的num</button></div>
</template>

export default {methods: {increment() {// 触发自定义事件 "increment"this.$emit('increment');}}
}

this.$emit('increment');用于与父组件进行通信。

父组件当中

<child-component @increment="numplus" />

子组件当中的button点击 就会触发