Vue.jsのレンダリングを通して小道具を渡そうとしていて、それらを見る

Question

vue.jsでCreateElement/renderを使って親から下に小道具を渡して、それを見ているときに問題があります。ここで

は私の親コンポーネント

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 
     } 
    }) 
    } 
}); 

だからあなたがここで見ることができている私は、いくつかのバスのEMITの値をとり、その後、私はuseColorにそれを渡すことです。私はこの値をuseThisColorとしてレンダリング関数に渡したいと思います。

ここは子供です。

<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 

このウォッチタグは出力されません。また、テンプレート内に小道具を置いて、効果を出さずに、Updated:タグで出力しようとしました。私はまた、引用符を使って親に小道具を設定しようとしました。これまでのところ何も働いていないと私は少し混乱しています。もし誰かがアイデアを持っているなら私に知らせてください。

Answer 1

MyDrawingコンポーネントにuseThisColorのプロパティを定義していないということが、ここでは予想されます。

ここにはexampleがあります。