I have one component that takes a string as input. In one of its instances, I'm sending it a string literal; and to the other one, I want to send a data parameter. How can I achieve this?
App.vue
<template>
<div>
<HelloWorld msg="What's up, man?" />
<HelloWorld msg="{{message}}" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
data() {
return {
message: "Nothing much, doing OK"
}
},
components: {
HelloWorld
}
};
</script>
HelloWorld
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
This is what I get as a result:
Any ideas? Where am I going wrong? I have looked at similar questions, but I couldn't find anything concrete.
The v-bind directive is used to bind data properties:
<HelloWorld v-bind:msg="message" />
<!-- OR shorthand -->
<HelloWorld :msg="message" />
demo
Related
I'm trying to use MainNavbarButton within MainNavbar. I imported the component, but get the error of "Module not found: Error: Can't resolve './components/MainNavbarButton.vue'" All the solutions I found seem to stem from a spelling mistake, but I'm pretty sure that's not the case here.
MainNavbar.vue
<template>
<div id="navbar">
<MainNavbarButton />
</div>
</template>
<script>
import MainNavbarButton from './components/MainNavbarButton.vue'
export default {
name: 'MainNavbar',
components: {
MainNavbarButton
}
}
</script>
MainNavbarButton.vue
<template>
<h2>{{ title }}</h2>
</template>
<script>
export default {
name: 'MainNavbarButton',
props: {
title
}
};
</script>
App.vue
<template>
<MainNavbar/>
</template>
<script>
import MainNavbar from './components/MainNavbar.vue'
export default {
name: 'App',
components: {
MainNavbar
}
}
</script>
I'm struggling on Vue.JS with a component that has as children/slots some "complex" components with canvas data (e.g. Maps).
I want to avoid that when the parent component re-renders, their inner slots re-render. Because of how this components work (or any other scenario), every time it re-renders it needs to do all of it's "loading" steps. Even when saving their real-time state.
For example:
Component.vue
<template>
<div>
<span>{{value}}</span>
<slot></slot>
</div>
</template>
View
<Component v-model="value">
<Map :latitude="0" :longitude="0"/>
</Component>
<script>
this.value = "Hello";
setTimeout(()=>{
this.value="Hello world!";
},1000);
</script>
Is there any way to prevent from slots from re-rendering when their parent re-renders?
Thanks in advance.
Hello use props for a child component, and this child is not will rerender
App
<template>
<div id="app">
<HelloWorld msg="Hello Vue in CodeSandbox!" :somedata="key">
slot information key: {{ key }}
</HelloWorld>
<button #click="key++">key++</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld,
},
data() {
return {
key: 0,
};
},
};
</script>
Child
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h3>somedata from props: {{ somedata }}</h3>
<hr />
<slot></slot>
<hr />
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: {
type: String,
default: "",
},
somedata: {
type: Number,
default: 999,
},
},
created() {
console.log("renred");
},
};
</script>
How you can see I used console.log("renred"); in the child component, you can check the console, the information will be shown only one time.
https://codesandbox.io/s/naughty-platform-ib68g?file=/src/components/HelloWorld.vue
I am getting the following - Cannot read property 'free' of undefined.
I will be adding this button component on multiple pages and I have data object which will allow me to add text based on whatever page I want displayed on a page. For example if its on the homepage I would like to use <buttons :text="buttonText.free" /> and on about us page I would like to use <buttons :text="buttonText.spend" />
Template file
<template>
<main class="container">
<buttons :text="buttonText.free" />
</main>
</template>
<script>
import Buttons from '~/components/atoms/buttons.vue'
export default {
components: {
Buttons
}
}
</script>
Component file
<template>
<div>
<button class="button"">
<span>{{ buttonText }}</span>
</button>
</div>
</template>
<script>
export default {
props: {
text: String
},
data () {
return {
buttonText: {
free: 'free',
spend: 'spend',
now: 'now',
nowFree: 'now free'
}
}
}
}
</script>
Could you tell me what I am doing wrong?
You should define your data in your parent component's data property. All the variables that is used inside the template tag will be fetched from data, computed or props of the component. You are passing an undefined buttonText data to your buttons component.
<template>
<main class="container">
<buttons :text="buttonText.free" />
</main>
</template>
<script>
import Buttons from '~/components/atoms/buttons.vue'
export default {
data() {
return {
buttonText: {
free: 'free',
spend: 'spend',
now: 'now',
nowFree: 'now free'
}
}
},
components: {
Buttons
}
}
</script>
and in your buttons component, just accept the props passed by the parent component. In this case, you are using text as the props of the buttons component.
<template>
<div>
<button class="button"">
<span>{{ text }}</span>
</button>
</div>
</template>
<script>
export default {
props: {
text: String
}
}
</script>
template.vue
<template>
<main class="container">
<buttons :text="your customized text" />
</main>
</template>
<script>
import Buttons from '~/components/atoms/buttons.vue'
export default {
components: {
Buttons
}
}
</script>
buttons.vue
<template>
<div>
<button class="button">
<span>{{ text }}</span>
</button>
</div>
</template>
<script>
export default {
props: {
text: String
}
}
</script>
here is a simple solution to solve your problem
but you need to learn more fundamentals on vue components
vue component doc
i wonder how passing some string or dynamic data from parent to child in NuxtJs
how i tried it and not worked:
it's my parent component:
<template>
<div>
<ChildComponent :someData="Some String" />
</div>
</template>
<script>
import ChildComponent from "~/components/childComponent.vue";
export default {
components: {
ChildComponent,
},
}
</script>
and here is my ChildComponent
<template>
<div>
{{someData}}
</div>
</template>
<script>
export default {
name:"ChildComponent",
props: {
someData: String
}
}
</script>
and this method nothing rendered in ChildComponent
You don't have to bind if you are passing values directly, ie, no need of semicolon.
<ChildComponent someData="Some String" />
You only need to bind if you are passing data.
<template>
<div>
<ChildComponent :someData="localData" />
</div>
</template>
<script>
import ChildComponent from "~/components/childComponent.vue";
export default {
components: {
ChildComponent,
},
data(){
return {
localData: "Some String"
}
}
}
</script>
I'm facing an issue with my first Vue Project. I already googled for a while but can't find something very usefull.
I simply try to create a parent ("Files") and a child component ("Filelist") and use the Filelist in Files. This is not working as expected. I can't see the mistake, beacause i already added
export default {
name: 'Filelist',
The only hint I can get is from the browser console
[Vue warn]: Unknown custom element: <Filelist> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Files> at src/docs/categories/Files.vue
<App> at src/App.vue
<Root>
and
./src/App.vue (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue) 42:14-22"
export 'Filelist' was not found in '#/components/Filelist'
Thanks a lot in advance
The code of Files:
<template>
<div class="">
<h1>Hedajo</h1>
<Filelist :msg="sometext"/>
{{ sometext }}
</div>
</template>
<script>
import { Filelist } from "#/components/Filelist.vue";
export default {
name: "Files",
components: {
Filelist
},
data() {
return {
sometext: "hejo",
};
},
methods: {
}
};
</script>
<style scoped>
</style>
The code of Filelist:
<template>
<component class="">
{{ msg }}
<p>hewhwe</p>
{{ hedadi }}
{{ testi }}
</component>
</template>
<script>
export default {
name: 'Filelist',
props: ["msg"],
data () {
return {
testi: "hedadi",
};
}
};
</script>
<style scoped>
</style>
It's a default export, so you don't need to extract it. Try
import Filelist from "#/components/Filelist.vue";
You will need to register FileList as a component before using it.
<template>
<div class="">
<h1>Hedajo</h1>
<Filelist :msg="sometext"/>
{{ sometext }}
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('Filelist', require('#/components/Filelist.vue').default);
....
You dont need the import Filelist statement in this case