Vue子组件向父组件传值

 1
 2
 3
 4
 5
 6
 7
 8
 9
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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

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>