Question

使用Vue.js，如何创建将componentB作为prop的componentA，并将其打印在其中？

示例：

index.vue

<template>
    <div>
        <componentA :componentPlaceHolder="componentB"></componentA>
    </div>
</template>

<script>
import componentA from './compnentA.vue';
import componentB from './componentB.vue'
export default {
    name: 'index',
    components: {componentA,componentB }    
}
</script>

componentA.vue

<template>
    <div>
        {{componentPlaceHolder}}
    </div>
</template>

<script>
export default {
    name: 'componentA',
    props: {
        'componentPlaceHolder': {}
    }    
}
</script>

Answer 1

您的实施存在一些问题：

您的范围错误：componentPlaceHolder位于父范围内，而不是组件A中。阅读：Compilation Scope。
对dynamic component binding使用:is（即v-bind: is）。数据绑定应引用组件的键。
由于您在同一上下文中嵌套了另一个组件中的其他组件，这意味着您必须交织内容。这是通过使用<component-a>中声明的slots来完成的。
避免使用区分大小写的DOM元素，而是使用kebab案例，即<component-a>而不是<componentA>，因为HTML元素不区分大小写（<componentA>和{{1将被视为相同的。）

以下是更新后的代码：

<componenta>

然后在 componentA.vue ：

<template>
    <div>
        <component-a>
            <customComponent :is="componentPlaceHolder"></customComponent>
        </component-a>
    </div>
</template>

<script>
import componentA from './componentA.vue';
import componentB from './componentB.vue'
export default {
    name: 'index',
    components: {
        'component-a': componentA,
        'component-b': componentB
    },
    data: {
        componentPlaceHolder: 'component-b'
    }
}
</script>

概念验证示例

如果有疑问，这是一个现场概念验证示例：

＆＃13;

<template>
    <div>
        <!-- Slot will interweave whatever that is found in <componentA> -->
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'componentA'  
}
</script>

＆＃13;

var componentA = {
  template: '#component-a'
};

var componentB = {
  template: '#component-b'
};

new Vue({
  el: '#app',
  components: {
    'component-a': componentA,
    'component-b': componentB
  },
  data: {
    componentPlaceHolder: 'component-b'
  }
});

＆＃13;

脚注：

VueJS自述文件非常复杂，我建议您阅读一些与您的用例非常相关的内容：

在组件A中打印组件B - vue.js

1 个答案:

概念验证示例

脚注：