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

그래서 당신은 여기에서 볼 수 있습니다 내 부모 구성 요소입니다 좀 버스 개의 발광의 가치를 가지고 있다는 것입니다 그리고 나는 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입니다.