英文:
How to pass data from parent component to child component in vue composition API?
问题
以下是您要翻译的内容：
我正在开发一个示例来学习如何使用 `props`，如此网址所示：https://vuejs.org/guide/components/props.html#one-way-data-flow
如下所示的代码，在 App.vue 中，当我尝试使用
> `<HelloWorld :name=refName/>`
时，我收到一个错误。
我查阅了一些关于这个问题的帖子，但仍然无法弄清楚为什么会出现这个错误。
所以，我的问题是：
1. 如何从 `App.vue` 传递值给 `:name`？
2. 我了解了关于 `props vs data` 的信息，如何在父类 `App.vue` 中使用组合 API 定义数据。
**App**
<template>
<HelloWorld :name=refName/> <!-- ERROR: unexpected end of
expression-->
</template>
<script>
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onActivated,onDeactivated,onBeforeUnmount,onUnmounted, ref } from 'vue'
const props = defineProps(['name_'])
const refName = ref(props.name_)
refName = "test"
</script>
**helloWorld.vue**
<template>
<div class="hello">
<h1>{{ props.name }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// props: {
// msg: String
// }
}
</script>
<script setup>
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onActivated,onDeactivated,onBeforeUnmount,onUnmounted } from 'vue'
import { defineProps } from "vue";
const props = defineProps(['name','address','phone'])
</script>
希望这对您有所帮助。
英文:
i am developing an example to learn how to use props as shown in this url :https://vuejs.org/guide/components/props.html#one-way-data-flow
as shown in the code below, in App.vue, i receive an error when i try to use
> <HelloWorld :name=refName/>
I revised some posts about this issue but still I could not figure out why I am receiving it.
So, my questions are:
-
How to pass value to
:namefromApp.vue -
I read about
props vs data, how to define data in the the parent classApp.vuewith composition API
App
<template>
<HelloWorld :name=refName/> <!-- ERROR: unexpected end of
expression-->
</template>
<script>
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onActivated,onDeactivated,onBeforeUnmount,onUnmounted, ref } from 'vue'
const props = defineProps(['name_'])
const refName = ref(props.name_)
refName = "test"
</script>
helloWorld.vue
<template>
<div class="hello">
<h1>{{ props.name }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// props: {
// msg: String
// }
}
</script>
<script setup>
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onActivated,onDeactivated,onBeforeUnmount,onUnmounted } from 'vue'
import { defineProps } from "vue";
const props = defineProps(['name','address','phone'])
</script>
答案1
得分: 1
refName必须在引号之间。
<HelloWorld :name="refName"/>
英文:
refName must have been enclosed between qoutes
<HelloWorld :name="refName"/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论