I am new in vuejs and Iam coding in laravel
I have watched vuejs tutorial but I have got a little confused
about parent and child components because when I started coding in laravel I just used a simple component and use it in blade and
I didn't feel needing parent component I want the usage and when to use
parent component because there were lots of documention for parent and child component I dont know when to use them.
parent component and child component is not the same, child component feeding by the parent as the prop, you can mutate data to child component by parent and emit data from child to parent for changed the prop.
for example:
////parent.vue////
<parent-component>
<child-component :item="items" :profile="profile"></child-component>
</parent-component>
export default {
data(){
items: {
id: 0,
name: 'Negar'
},
data2: {
id: 1,
name: 'Hozhabr^_^'
}
},
profile: {
url: 'http://www.alibaba.com',
company: 'alibaba',
city: 'Tehran'
}
}
//// child.vue /////
<template>
Item: {{items}}
profile: {{profile}}
</template>
export default {
props:['items', 'profile']
}
Related
How to get all the props like $store, $parent, $root everything that a parent component has inside a child component?
So I'm creating a parent component and a child.
However I don't have anything to render within the child. So I'm creating a renderless child component.
However I'm programatically inserting new html elements via child component
following piece of code is the parent component where I mount the child component.
This is the method I found online.
This is working fine. But I'm not getting the props like this.$store , this.$parent and all (which are automatically available inside the parent component) in the child component.
import { Child } from "./components/child";
export default {
name: "parent",
components: {},
props: [],
data() {
return {};
},
computed: {},
created() {
new Child().$mount();
},
mounted() {},
methods: {},
};
This is the child component.
import Vue from "vue";
const CHILD = {
name: "child",
components: {},
props: [],
data() {
return {};
},
render() {
return;
},
computed: {},
created() {},
mounted() {},
methods: {},
};
export const Child = Vue.extend(CHILD);
So the basic idea is to create child component classes having all the options like $store $el and all (everything vue provides).... but instead of instantiating it inside the template I want to instantiate them in the parent component like this: new Child({...props}).
So is that possible. I'm doing this because my child components are renderless. (But within the child components I'm creating Dom elements..., & the reason I want to extend all the functionalities provided by vue is because in that way I don't want to write my own store, my own event emitter, my own prop binder.... everything will be automatically available...)
KEY TAKEAWAY is that I want to create Child components manually like by calling new Child() rather than registering them as components inside the parent as components: {'app-child': Child} and instantiating them inside the parent template ... Along with that I want every functionalities provided by vue inside the child component.. something like extending vue..
Also How can I listen to events from the child created as above ...
something like this.
// child
created() {
this.$emit('event')
}
//parent
mounted() {
this.child.$on('event', console.log)
}
sources:
https://css-tricks.com/creating-vue-js-component-instances-programmatically/
https://css-tricks.com/building-renderless-vue-components/
My app has a component:
export default {
name: 'category',
props: {
ref: Object,
asLabel: Boolean
},
components: {
Products
}
}
In Products component, the template has:
<category :asLabel="true" :ref="ref"/>
In component declaration:
components: {category}
This usage throws an error:
custom element: <category> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
So I am trying to use ancestor component inside a child component. Is there anything I am missing?
This is something that's prevented by webpack/browserify. You need to use asynchronous imports to import your parent component in child. Something like:
components: {
category: () => import('./path-to-category/category.vue')
}
Please read the docs here to know why that happens https://v2.vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components.
I have 3 vue.js nested components: main, parent, child.
The parent component load basic data, the child is a simple countdown widget which needs just a data to be configured.
If I set the parent script with static data (IE deadline='2019-12-12') the child show the widget working nice, but if I use dynamic data it generate error.
I'm using computed to pass data to the child component and if I debug it using an alert I see 2 alerts: undefined and then the correct date.
The issue is the first computed data (undefined) crash the widget, so how to create child component using updated (loaded) data?
Parent template:
<template>
<div>
<flip-countdown :deadline=deadline></flip-countdown>
</div>
</template>
Parent Script: it needs to be fixed
export default {
components: {FlipCountdown},
props: ['event'],
computed: {
deadline: function () {
if (typeof(this.event.date)!="undefined") {
//alert(this.event.date)
return this.event.date;
} else {
return "2019-05-21 00:00:00";
}
},
},
Child template: it works
<template>
<div>
<flip-countdown :deadline="deadline"></flip-countdown>
</div>
</template>
Your parent component passes the deadline to its child component before the mounted lifecycle hook fires. Your child component sets its deadline with the initial value of undefined.
You should make deadline a computed property in child component:
computed: {
internalDeadline() {
return this.deadline; // comming from props
}
}
Then you can use internalDeadline in child.
Alternatively, you could wait to render the child component until deadline is defined:
<flip-countdown v-if="deadline !== undefined" :deadline="deadline"></flip-countdown>
I want to pass down the changes made in parent component data values to its child components each time the value changes in parent how can i achieve it in vue.js. I am using 3 custom components that have to reflect the current value of the parent component each time. p.s i am new to vue.js
you just need to pass it as a prop. In your template:
<my-component :my-prop="myData" />
and in your script tag:
export default {
data() {
myData: 0,
}
}
Whenever you update this.data, the component will update its view, as the prop will have changed
Data is typically passed one-way from parent to child components via props. See the documentation on this here.
Example:
// register the child component
Vue.component('child', {
props: ['myProp'],
template: '<span>{{ myProp }}</span>'
})
// in parent component
<child :my-prop="hello"></child>
Thanks for reading my question.
I have doubts about how to accomplish this in my Vue.js app.
Parent Component: App.vue
Child Components: Loading.vue, ProductsList.vue, NoProductList.vue
The App component is the container. When the page loads, the Loading component is displayed.
The Loading component then checks for products. If there are products the Loading component will return the products as an object.
If there aren't any products the Loading component will return null.
How do I tell the App component which component to use based on the Loading components return value? ie.. Load the ProductsList component if there are products and the NoProduct component when there aren't any products?.
What's the correct way to do notify the parent component about which component it should use in Vue?
Should I use $emit (pass data from child to parent), State Management https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch or a Bus component?
Some code...
Loading.vue component (child):
export default {
name: 'loading',
data () {
return {
message: ''
}
},
mounted: function () {
this.loadingProcess();
},
methods: {
loadingProcess: function () {
//process
this.$emit('found-products', 'hola');
}
}
App.vue component (parent):
<template>
<div>
<div id="resultComponent" #found-products="checkProductsList">
<loading></loading>
...
</div>
</div>
</template>
Thanks in advance.
For parent-child interactions, the correct way is for the child to $emit and the parent to set props.
State management and buses are for more complex systems where data must be shared by not-closely-related components.