1.计数器案例
父组件:
<template> <h2>当前计数为: {{counter}}</h2> <HelloWorld @add1="add1" @decre1="decre1"></HelloWorld> </template> <script setup> import { ref } from 'vue' import HelloWorld from './HelloWorld.vue' // 1、定义的属性 const counter = ref(0) // 2、定义的方法 const add1 = (payload) => { counter.value = payload } const decre1 = (payload) => { counter.value = payload } </script>
子组件:
<template> <div> <button @click="increment">+1</button> <button @click="decrement">-1</button> <div> <input type="text" v-model.number="num"> </div> </div> </template> <script setup> import { ref, defineEmits } from 'vue' // 1、定义的属性 const num = ref(0) // 2、定义发射给父组件的方法 const emits = defineEmits(['add1', 'decre1']) // 3、定义新增和递减计数方法 const increment = () => { num.value++ emits('add1', num.value) } const decrement = () => { num.value-- emits('decre1', num.value) } </script>
标签:const,vue3,value,num,使用,defineEmits,ref,payload From: https://www.cnblogs.com/pwindy/p/17723206.html