vue3 props 使用的困惑，求解答 ？

Question

问题1

比如我有两个组件，父组件 A、子组件 B
B 组件中如下:

<template>{{name}}</template>
<script setup>
import {ref} from 'vue'
const name = ref('')
</script>

此时父组件 A 传来了一个值，名称也为 name

<template>{{name}}</template>
<script setup>
import {ref, defineProps} from 'vue'
const props = defineProps({name: String})
const name = ref('')
</script>

那么此时页面上中渲染的是 name 还是 props.name？

---

问题2

依旧是父组件 A、子组件 B，父组件 A 有两个方法切换变量 name , 如下：

<template>
  <B :name="name" />
  <div @click="ceshi1"><div>
  <div @click="ceshi2"><div>
</template>
<script setup>
import {ref} from 'vue'
import B from "./B";
let name = ref('')
const ceshi1 = () => {name.value = 1;}
const ceshi2 = () => {name.value = 2;}
</script>

那么此时子组件 B 中 name 变量应该如何声明?
我不确定 ref(props.name) 写法是否正确

<template><div @click"fun">{{name}}</div></template>
<script setup>
import {ref, defineProps} from 'vue'
const props = defineProps({name: String})
const name = ref(props.name)
const fun = () => {name.value = 3}
</script>

---

还望解答，万分感谢！

Answer 1

问题 1
渲染 name 。

问题 2
父传子是单向的，子不能直接修改 prop ，示例中的 name 实际上还是 B 内的，而不是 A 传来的。子若想修改父，请参考 emit 和语法糖 v-model 。