I want to pass button element to the child component using refs.
<button ref="button">
Button
</button>
<child :element="$refs.button" />
But in child component element prop comes null. How can I send button element to the child component ?
As per my understanding, You want to use the button element in multiple components. You can make button itself as a separate component and use it where ever you want.
You can try something like this :
Vue.component('customBtn', {
props: ['buttontext'],
template: '<button>{{ buttontext }}</button>'
});
Vue.component('child', {
template: '<custom-btn buttontext="This is a child button"></custom-btn>'
});
var app = new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<custom-btn buttontext="This is a parent button">
</custom-btn>
<child></child>
</div>
Related
Vue component hasn't onShow lifecycle method.
How to call a component method each time this component show in vue2?
I have used this library for that purpose before:
https://github.com/Akryum/vue-observe-visibility
I am assuming you are dynamically hiding and showing the component and you want to trigger few functionality every time component show. If Yes, You can simply achieve this requirement by using v-if directive instead of v-show. As v-if will rebuild the component every time condition got passed.
Live Demo :
Vue.component('child', {
props: ['childmsg'],
template: '<p>{{ childmsg }}</p>',
mounted() {
console.log('child component mounted');
}
});
var app = new Vue({
el: '#app',
data: {
buttonMsg: 'Show Child Component',
showChild: false
},
methods: {
toggleBtn() {
this.showChild = !this.showChild;
this.buttonMsg = this.showChild ? 'Hide Child Component' : 'Show Child Component';
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="toggleBtn">{{ buttonMsg }}</button>
<child v-if="showChild" childmsg="This is a child message"/>
</div>
I have parent and chidl component... I need to run child method, when i click on button in parent.
Example code:
Parent
<template>
<child-component></child-component>
<button>Open Modal in child Component (set modal = true in child component)</button>
</template>
Child:
<template>
<div v-if="modal">
<button #click="modal = false">Close</button>
</div>
</template>
<script>
export default {
data() {
return {
modal: false
}
}
}
</script>
You can achieve this via different implementations. The most common one is via emit (another alternative is via dispatching actions if you are using the Redux pattern)
First, you want to catch the even on the parent component and emit an event. So this should be your template.
<template>
<child-component></child-component>
<button #click="click">Open Modal in child Component (set modal = true in child component)</button>
</template>
Then you have to emit an event (from the parent component) on the function called when a click was made.
Something like:
click: function() {
this.$emit('update');
}
Lastly, your child component needs to "hear" that event. You can achieve that with something like that on the created function of the child component:
this.$parent.$on('update', this.updateModal);
this.updateModal is a function on your child component which just flips the value of the boolean.
In vue you can pass a function as a prop. So you could add a function to alternate model within your parent component then pass it into your child so it can be used normally. I'll put a simple example below.
small edit, you can bind a class like a hidden/reveal class using the status which is bound to the modal state
// Html
<div id="app">
<child v-bind:on-click="toggleModal" v-bind:status="modal" />
</div>
// Parent Component
var sample = new Vue({
el: '#app',
data: {
modal: false
},
methods: {
toggleModal() {
this.modal = !this.modal
}
}
});
// Child component with function prop
Vue.component('child', {
props: {
onClick: Function,
status: Boolean
}
template: '<button v-on:click="onClick()">Press Me</div>'
});
I'm able to use $ref to isolate the correct chuck of html, but I need a css selector for that chuck. I wish this worked...
this.$refs.myref.querySelector()
did you try:
this.$refs.myref[0].$el
it equals
document.querySelector(’.myref’)
You are, in fact, able to use querySelector on a ref if the ref in question is referring to a DOM element and not to a child Vue component. The fact that this.$refs.myref.querySelector() doesn't work for you leads me to believe that myref is a component and not an element.
If the ref is a Vue component, you are still able to reference the root DOM element of the component via its $el property. So, in your case: this.$refs.myref.$el.querySelector().
Here's a simple example snippet illustrating the difference:
Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('child', {
template: `
<div>
<span class="inside-child">Inside Child</span>
</div>
`
})
new Vue({
el: '#app',
mounted() {
console.log(this.$refs.child.$el.querySelector('.inside-child'));
console.log(this.$refs.div.querySelector('.inside-div'))
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<child ref="child"></child>
<div ref="div">
<span class="inside-div">Inside Div</span>
</div>
</div>
I have a button inside of a component that is calling an $emit('close') and the container that is holding the component has a #close='myMethod' and myMethod does not get called when you click the button that's inside the component.
Html:
<button #click="myMethod">outer</button>
<div class="parent" #close="myMethod">
<my-component></my-component>
</div>
<div id="my-component" style="display:none;">
<button #click="$emit('close')">emit</button>
</div>
JS:
Vue.component('my-component', {
template: '#my-component'
});
var app = new Vue({
el: '#app',
methods: {
myMethod: function() {
console.log('myMethod invoked');
}
}
});
If you click the outer button, the method gets invoked, but not the button inside the template. What am I missing?
Jsbin: http://jsbin.com/cuhipekocu/edit?html,js,console,output
You're not listening to the event on the component. Try
<div class="parent">
<my-component #close="myMethod"></my-component>
</div>
Data can be passed down to child components using props. But why doesn't my tag child work?It doesn't print out hello.Here is my code,
html:
<div id="app">
<child message="hello"></child>
</div>
javascript:
new Vue({
el:'#app'
});
Vue.component('child',{
props:['message'],
template:"<span>{{message}}</span>"
})
You component needs to be declared before your main Vue instance:
Vue.component('child',{
props:['message'],
template:"<span>{{message}}</span>"
})
new Vue({
el:'#app'
});
Here's the JSFiddle: https://jsfiddle.net/Lxeb7gmo/
You must dynamically bind it by adding : in front of message like this
:message="hello"