VueJs:使用内联模板从嵌入式组件中访问数据

Question

我有这个组件，它看起来像这样

<template>
    <form-wrapper
        v-show="show"
          :request-action="action"
        inline-template
        v-cloak
    >
      <form @submit.prevent="submit()" novalidate>

        <html-editor
            v-model="fields.body"
            id="body"
            :contents-css="editorStyles"
        ></html-editor>

      </form>

    </form-wrapper>
</template>
<script>
    export default {
        props: {
            show: {
                type: Boolean,
                required: true
            },
            action: {
                type: String,
                required: true
            },
            editorStyles: {
                type: String,
                required: true
            }
        }
    }
</script>

如您所见，主组件(您可以看到其内容的文件)有另外两个嵌入组件：form-wrapper和html-editor --第二个组件在使用inline-template的form-wrapper中。

我遇到的问题是，editorStyles无法从form-wrapper内联模板中访问。

我的问题是-如何使这个属性在form-wrapper组件的form-wrapper中可用(除了将它添加为form-wrapper的属性之外)。

Answer 1

所以，这看起来是可行的。感觉有点不舒服，但你有这种感觉:)

​

console.clear()

Vue.component("html-editor", {
 props:["contentsCss"],
 template:`<div>From Parent: {{contentsCss}}</div>`
})

Vue.component("form-wrapper", {
})

new Vue({
  el:"#app",
  data:{
    editorStyles: "Hello World"
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <form-wrapper inline-template>
    <html-editor :contents-css="$parent.editorStyles"></html-editor>
  </form-wrapper>
</div>

​