I'm having trouble passing a prop from a parent down through a created child using CreateElement/render in vue.js and then watching it.
Here is my parent component
Vue.component('my-drawing', MyDrawing)
new Vue({
el: '#drawing',
mounted() {
Bus.$on('emitColorSelection', (emitString) => {
console.log("inside socket.js/my-drawing and emitString is ", emitString);
this.useColor = emitString;
console.log('inside socket.js/my-drawing and this.useColor after set is ', this.useColor);
})
},
data() {
return {
channel2: null,
canvases: [],
useColor: 'rgba(255, 0, 0, 1)'
}
},
render(createElement) {
return createElement(MyDrawing, {
props: {
useThisColor: this.useColor
}
})
}
});
So you can see here is that I take the value of the emit for some bus and then I pass that to useColor. I would like to then pass this value to my render function as useThisColor.
Here then is the child.
<template>
//my template stuff
</template>
<script>
//stuff
watch: {
useThisColor (n, o) {
console.log("useThisColor watch, ", n, o) // n is the new value, o is the old value.
}
}
//stuff continues
So this watch tag doesn't output. I've also tried putting the props in the template to no effect, as well as trying to output it on a Updated:
tag. I've also attempted to set props in the parent using quotes. Nothing so far has worked and I am a little confused. If anyone has any ideas please let me know.
“Props” is a special keyword which stands for properties. It can be registered on a component to pass data from a parent component to one of its children components. This is a lot easier compared to using state management libraries like vuex for Vue.js applications.
This page assumes you've already read the Components Basics. Read that first if you are new to components. Vue components require explicit props declaration so that Vue knows what external props passed to the component should be treated as fallthrough attributes (which will be discussed in its dedicated section ).
If you do, Vue will warn you in the console: There are usually two cases where it's tempting to mutate a prop: The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards. In this case, it's best to define a local data property that uses the prop as its initial value:
You might be used to passing methods down to child components using custom event names like this… ... ... But there is another more succinct way… ... ... In the first case, Vue is using the event system, and in the second the method prop is a simple callback.
I expect the issue here is you simply didn't define the property, useThisColor
, on the MyDrawing component.
Here is an example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With