javascript - 将数据传递给组件

Question

我有动态组件:

<component v-bind:is="current.ComponentName" :myvar="current.Text"></component>

我尝试为当前解析的组件传递变量myvar。

子组件的定义如下:

    <template>
        <div id="home">
            <h1>2 {{ myvar }} aasa</h1>
        </div>
    </template>

    <script>
        Vue.component(
            'MyComponentName',
            {
                props: ['myvar']
            });
    </script>

动态组件解析有效，但我无法通过 :myvar=... 传递任何数据。我怎样才能做到这一点？

Answer 1

如果我误解了你的问题，我很抱歉，这不是那么清楚，如果我这样做了，你可以在评论中告诉我，我会编辑我的答案。另外你的问题并不完整

<小时/>

我认为你误解了单个文件组件和 Vue.component 之间的区别

您必须选择其中之一，不能混合两者。

您可以像这样定义组件:

<template>
  <div id="home">
        <h1>2 {{ myvar }} aasa</h1>
    </div>
 </template>

<script>
export default {
  props: ["myvar"] 
}
</script>

或者像这样:

Vue.component("component-name", {
  props: ["myvar"], 
  template:`
    <div id="home">
        <h1>2 {{ myvar }} aasa</h1>
    </div>
  `
})

文档链接:https://v2.vuejs.org/v2/guide/components.html