Question

我是Vue的初学者。我创建了一个自定义组件，并尝试完全按照入门Vue cli模板中所示绑定所有内容。这是代码。

Circle.vue

<template>
    <div :style="custom">
    </div>
</template>

<script>
export default {
    name:'Circle',
    props:{
        size:String,
        color:String
    },
    computed:{
        custom(){
            return {
                background:this.color,
                height:this.size,
                width:this.size
            }
        }
    }
}
</script>

在View.vue文件中

<script>
// :class="['']"
import Circle from '@/components/Circle.vue'
export default {
  name: "Landing",
  components:{
    Circle
  }
};
</script>

我试图这样使用它

<Circle size="100px" color="#222222"/>

我尝试按原样打印道具，但是它也不起作用

<template>
    <div :style="custom">
        {{size}} {{color}}
    </div>
</template>

执行此操作后，屏幕上没有任何显示。我从here

获得了帮助

感谢您的时间！

Answer 1

如docs中所述：

除了根App组件和Vue提供的内置组件（例如<transition>或<component>）外，组件名称应始终为多字。

由于所有HTML元素都是一个单词，因此可以防止与现有和将来的HTML元素发生冲突。

定义组件名称时有两个选择：

带烤肉架的情况

Vue.component('my-circle', { /* ... */ })

在使用kebab-case定义组件时，在引用其自定义元素时也必须使用kebab-case，例如在<my-circle>中。

使用PascalCase

Vue.component('MyCircle', { /* ... */ })

在使用PascalCase定义组件时，在引用其自定义元素时可以使用任何一种情况。这意味着<my-circle>和<MyCircle>都是可以接受的。

演示：

Vue.component('my-circle', {
  props: {
    size: String,
    color: String
  },
  template: '<div :style="custom"></div>',
  computed: {
    custom() {
      return {
        background: this.color,
        height: this.size,
        width: this.size
      }
    }
  }
})

new Vue({
  el: "#myApp"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <my-circle size="100px" color="#222222" />
</div>

Vue组件未使用道具渲染

1 个答案: