I would like to know how can i assign values to the properties foo and greetingMessage
please
App.vue:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<span>greetingMessage:{{ greetingMessage }}</span>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onActivated,onDeactivated,onBeforeUnmount,onUnmounted } from 'vue'
export default {
name: 'App',
props: ['foo','greetingMessage'],
components: {
HelloWorld
},
setup(props) {
console.log("props:",props)
console.log("props.foo:",props.foo)
console.log("props.greetingMessage:",props.greetingMessage)
return {
props
}
}
}
</script>
2
Answers
Currently you have props defined on your App component. Root App component isn’t meant to have props. Or if you’re trying to use variables in your Root App component, you’ll have to define component data and use variables from data section, not from props. Props are values you pass from a main component to another one that you’ll be using in the main component. So for example if you try to replace HelloWorld component props you’ll do it like this.
Since currently you’re trying to assing "Welcome to Your Vue.js App" to ‘msg’ prop. To assign values to ‘foo’ and ‘greetingMessage’ you’ll have to do it like:
That’s how you do it statically. To pass variables to props and make it dynamic, you’ll have to do it like this:
Keeping in mind that you will have to define those variables in your Vue class in data section.
More info on data: https://vuejs.org/guide/essentials/component-basics.html
More info on props: https://vuejs.org/guide/components/props.html#prop-passing-details
It’s not cleat what you want to do. If the component has props then it is expected to be a child component.
Property values must be passed from the parent component. See a example below:
Child.vue
Parent.vue
UPDATED
Pass props using v-bind, Parent.vue: