嘗試在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 。

這是一個例子 。