I am new in vue.js..
I use webpack + vue-cli .
But I can't pass the data from parent to child
code like this..
<template lang="html">
<div>
<input v-model="parentMsg"></input>
<br>
<child v-bind:msg="parentMsg"></child>
</div>
</template>
<script>
import child from './components/lists'
export default {
data: function () {
return {
parentMsg: ''
}
},
computed: {},
ready: function () {},
attached: function () {},
methods: {},
components: {
child
}
}
</script>
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data: function () {
return {
msg: ''
}
}
}
</script>
By the way ...
How to bind child components to the parent array..
parent: data: array[...],
I want to bind the first of children's data to arr[0]
second to array[1]..
Is this possible?? or use v-for??
In your child component use the props property to receive parent data like:
<script>
export default {
props: ['msg'],
data: function () {
return {
}
}
}
</script>
Read more about this here
Related
i want to execute my function depends of the type, this function is in the child component,
childComponent:
methods: {
searchButton (type) {
console.log(type)
if(type==='1'){}
if(type==='2'){}
if(type==='3'){}
},
},
i would like to this component like this
<Child #emit="seachButton('1')"
its possible?
Edit1: why the follow example does not work?
i am sending from the parent
Parent.vue
<Child #onClick="onClick1"/>
<Child #onClick="onClick2"/>
<script>
import Child from './Child.vue'
export default {
name: 'Tabs',
props: {},
components: {
Child,
},
methods: {
onClick1() {
console.log('onClick1')
},
onClick2() {
console.log('onClick2')
},
and on my child component:
<template>
<el-button #click="onClick" type="primary">{{ buttonText }}</el-button></template>
<script>
export default {
name: 'Child',
props: {
},
methods: {
onClick () {
this.$emit('click')
},
},
}
</script>
Just do want you want to do inside of your child.vue methods and use emit there too.
First: Do something in your if-statement and emit the value to your parent.vue:
methods: {
searchButton (type) {
console.log(type)
if(type==='1'){
//just a e.g.
this.value = type;
this.$emit('myValue', this.value);
}
if(type==='2'){}
if(type==='3'){}
},
},
Second: Define the emitted in your parent.vue
<Child #myValue="myValue"/>
Third: Reference second step and set a new variable in your parent.vue methods like this:
methods: {
newValue(val) { //val = your emitted value
this.valueFromChild = val //define your val in your parent.vue
}
}
Hopefully this helps you out!
Just for additional info:
EMIT is to pass data from your child to your parent and will be declared like my e.g in step 2 (#example="example)
PROPS is to pass data from parent to child, these will declared in the component-tag like :example="example"
UPDATE TO NEW EDIT:
In your child.vue (!) template you have to define a click-event first when you want to do it after clicking on a button like in my code. Than go to your methods and define a function for each and emit this with a name and a value !
<template>
<el-button type="primary" #click="triggerClick1()">{{ buttonText }}</el-button>
<el-button type="primary" #click="triggerClick2()">{{ buttonText }}</el-button>
</template>
<script>
export default {
name: 'Child',
methods: {
triggerClick1() {
this.$emit('onClick1', "First button was triggerd")
}
triggerClick2() {
this.$emit('onClick2', "Second button was triggerd")
}
},
}
</script>
In you parent.vue (!) you have to declare but where you add your component than you go to your methods as well like in my code and declare your variable, than you can use it in your parent! Like this
<template>
<Child #onClick1="onClick1" #onClick1="onClick2"/>
</template>
<script>
import Child from './Child.vue'
export default {
name: 'Tabs',
props: {},
components: {
Child,
},
methods: {
onClick1(val) {
this.valClick1 = val;
},
onClick2(val) {
this.valClick2 = val;
}
}
</script>
An easier way would be using a ref like
<template>
<Child #child-click="searchButton" ref="child_ref"/>
</template>
<script>
export default {
name: 'Parent',
methods: {
searchButton (type) {
console.log(type)
if(type==='1'){
this.$refs.child_ref.handler1(); // can pass args if required
}
if(type==='2'){
this.$refs.child_ref.handler1(); // can pass args if required
}
},
}
}
</script>
and your child component be like
<template>
<el-button #click="onClick" type="primary">{{ buttonText }}</el-button></template>
<script>
export default {
name: 'Child',
methods: {
onClick () {
let someVal = 1 // can you any value that is used in if-else inside parent
this.$emit('child-click', someVal) // changed the name becoz there is already a default handler called 'click`
},
handler1() {
},
handler2() {
}
},
}
</script>
I have a parent component and a childcomponent.
In my parent component I call a simple childcomponent-method to save an email to the email variable. But the variable email does not change.
My Parentcomponent:
import ChildComponent from "./ChildComponent";
export default {
components: {ChildComponent},
methods: {
openDocument(d) {
ChildComponent.methods.saveEmail('new#example.com');
}
}
My Childcomponent:
<template>
<div>
Email: {{ email }}
</div>
</template>
<script>
export default {
data: function () {
return {
email: ''
}
},
methods: {
saveEmail(email) {
this.email = email; // this does NOT change my email variable
}
}
}
</script>
Why my email variable does not change? How can I change this variable?
In vue it is not work like that. You have to use Probs:
Parent :
<template>
<div class="container">
<child-component :email ="email"></child-component> // NEW HERE
</div>
</template>
<script>
import ChildComponent from "./ChildComponent";
module.exports = {
data: function () {
return {
email:''
}
},
methods: {
openDocument(d) {
this.email = "example#gmil.com"
}
},
}
</script>
Child component:
<template>
<div class="container">
<h1>Profile Form Component</h1>
</div>
</template>
<script>
module.exports = {
module.exports = {
props: ['email'], //NEW HERE
created: function () {
console.log(this.email) //prints out an empty string
}
}
</script>
ATTENTION
As you I added 2 comment NEW HERE in the code , these 2 lines are really important for what you wanna do.
The code that I giving you is an example (not a complete answer) , Probs is the solution of what you asked for.
Hope it Helps <3.
The ChildComponent variable only holds the recipe for creating components of this type - but it does not hold your actual component. Your actual component lives inside your template - you have to add a ref attribute to it (e.g. <custom-component ref="custom" ... />) and then reference it like this.$refs.custom.saveEmail()
I have a string (example, because it's an object with many key/values, want to loop and append to htmloutput) with a component name. Is it possible to render/build the component inside a method and display the html output?
Is that possible and how can i achieve that?
<template>
<div v-html="htmloutput"></div>
</template>
<script>
export default {
component: {
ComponentTest
},
data() {
return {
htmloutput: ''
}
},
methods:{
makeHtml(){
let string = 'component-test';//ComponentTest
//render the ComponentTest directly
this.htmloutput = ===>'HERE TO RENDER/BUILD THE COMPONENTTEST'<==
}
},
created(){
this.makeHtml();
}
</script>
You might be looking for dynamic components:
https://v2.vuejs.org/v2/guide/components-dynamic-async.html
Example:
<template>
<component :is="changeableComponent">
</component>
</template>
<script>
import FirstComponent from '#/views/first';
import SecondComponent from '#/views/second';
export default {
components: {
FirstComponent, SecondComponent
},
computed: {
changeableComponent() {
// Return 'first-component' or 'second-component' here which corresponds
// to one of the 2 included components.
return 'first-component';
}
}
}
</script>
Maybe this will help - https://forum.vuejs.org/t/how-can-i-get-rendered-html-code-of-vue-component/19421
StarRating is a sample Vue component. You can get it HTML code by run:
new Vue({
...StarRating,
parent: this,
propsData: { /* pass props here*/ }
}).$mount().$el.outerHTML
in Your method. Remember about import Vue from 'vue'; and of course import component.
What you're trying to do really isn't best practice for Vue.
It's better to use v-if and v-for to conditionally render your component in the <template> section.
Yes you can use the render function for that here is an example :
Vue.component('CompnentTest', {
data() {
return {
text: 'some text inside the header'
}
},
render(createElement) {
return createElement('h1', this.text)
}
})
new Vue({
el: '#app',
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<Compnent-test />
</div>
Or :
if you are using Vue-cli :
on your componentTest component :
export default {
render(createElement) {
return createElement('h1', 'sometext')
}
// Same as
// <template>
// <h1>sometext</h1>
// </template>
//
}
and on your root element (App.vue as default) :
export default {
....
component: {
ComponentTest
}
}
<template>
<div>
....
<Component-test />
</div>
</template>
example : codesandbox
you can read more about
Render Functions & JSX
How do I access my subcomponent? For example my parent component has the following 'dynamic' component (the component changes all the time at runtime).
<template>
<!-- The below component count be Component1 or Component2, etc. -->
<component id="my-cmp" v-if="templateComponent" :is="templateComponent"></component>
</template>
How can I access myCmp to call a function...this.myCmp.doSomething() doesn't work. Please note using emit here isn't a solution because emit will call doSomething() on all 'dynamic' components not just the current one.
Below is an example of my usage:
<template>
<!-- The below component count be Component1 or Component2, etc. -->
<component id="my-cmp" v-if="templateComponent" :is="templateComponent"></component>
</template>
<script type="text/javascript">
export default {
components: {
'cmp1': Component1,
'cmp2': Component1,
},
computed: {
templateComponent() {
// ...some logic that will determine if to use/chage to Component1 or Component2
return 'cmp1'
},
},
methods: {
someTrigger() {
// how can I reference #my-cmp?
// For the purpose of; myCmp.doSomething()
// I have tried the below technique BUT this will call doSomething
// on BOTH components not just the current/visible one
this.$emit('doSomethingNow') // Component1 and Component2 register using this.$parent.$on('doSomethingNow', this.doSomething)
}
}
}
</script>
use ref property,give you an example:
Vue.component('com1',{
template: '<div>component com1</div>',
methods: {
fn () {
alert('method called')
}
}
})
var app = new Vue({
el: '#app',
data () {
},
computed: {
whichCom () {
return 'com1'
}
},
methods: {
btnClick () {
this.$refs.myCom.fn()
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<component ref="myCom" v-if="whichCom" :is="whichCom"></component>
<button #click="btnClick">call method of com1</button>
</div>
Is it possible to bind a prop to a function?
In my example below I’m trying to get a value from a function in the main App.vue and pass it as a prop to the child component customComponent.
e.g. (this example doesn’t work)
App.vue
import customComponent from ‘./custom-component.vue'
<template>
<custom-component
v-bind:myValue="geMyValue()"
></custom-component>
</template>
<script>
export default {
name: "Item",
methods: {
getMyValue: function() {
return 1+3;
}
}
}
</script>
customComponent.vue
<template>
<h3 class="some-custom-layout">custom component</h3>
<input type="button" #click="sendMyValue()" />
</template>
<script>
export default {
name: “custom",
props: ['myValue']
methods: {
sendMyValue: function() {
console.log(this.myValue);
}
}
}
</script>
It's possible, but probably it would be better to use computed properties, if you are going to return value:
<template>
<custom-component
v-bind:myValue="myValue"
></custom-component>
</template>
<script>
export default {
name: "Item",
computed: {
myValue: function() {
return 1+3;
}
}
}
</script>
https://v2.vuejs.org/v2/guide/computed.html