vue
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
Helloworld.vue
<template>
<div>
  <h1>Helloworld </h1>
  <button @click="trigEmit">点击触发父组件传来的函数</button>
  <button @click="()=>{
    console.log(props.name)
  }">点击打印从父组件传来的值</button>
</div>
</template>
<script setup>
/**
 * 
 * defineProps：用于声明接收的数据（从父组件传递的 props）。
  defineEmits：用于声明和触发事件（子组件通知父组件）。
 */
import { defineProps,defineEmits } from 'vue';
const props = defineProps(['name'])
const emit = defineEmits(["fun"])
const trigEmit = ()=>{
  emit("fun","meowrain")
}
</script>
<style scoped></style>
vue
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
app.vue
<script setup>
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
const name = ref("meowrain")
const printHello = (arg)=>{
  console.log("hello " + arg)
}
</script>

<template>

<div>
  <!-- @ 传递方法，:传递值 -->
  <HelloWorld :name="name" @fun="printHello"/>
</div>
</template>

<style scoped>

</style>