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>

正如您所看到的，主要组件（您可以看到哪些内容的文件）还嵌入了2个其他组件：form-wrapper和html-editor - 第二个组件位于form-wrapper内，其中使用inline-template。

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

我的问题是 - 如何在inline-template组件的form-wrapper内提供此属性（除了将其添加为form-wrapper的属性外）。

Answer 1

所以，这个确实似乎有效。感觉有点icky，但你有它:)）

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: