Question

我需要将带有数据的导入组件放入vue.js app。

我可以进行组件注册，但我使用了这段代码。

正确代码：

  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'test': {
        template: '<div>msg: {{message}}</div>',
        props: {
          message: {
            type: String,
            required: true
          }
        }
      }
    }
  }

但是如何在本地注册数据呢？

不正确：

import Test from './components/Test.vue';

export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'test': {
        template: Test,
        props: {
          message: {
            type: String,
            required: true
          }
        }
      }
    }
  }

Answer 1

这应该有效

import Test from './components/Test.vue';

export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      Test
    }
  }

如果你想传递道具

<template>
<Test :message=msg></Test>
</template>

Answer 2

我在组件代码（components / xxx.vue）中使用props并解决了它。

导入vue.js组件

2 个答案: