javascript - Vue 组件未使用 props 渲染

<分区>

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

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

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

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

执行此操作后屏幕上没有显示任何内容。我从 here 得到了帮助

感谢您的宝贵时间!

最佳答案

如 docs 中所述:

Component names should always be multi-word, except for root App components, and built-in components provided by Vue, such as <transition> or <component>.

This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.

定义组件名称时有两种选择:

带烤肉串

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>

关于javascript - Vue 组件未使用 props 渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62275290/

上一篇：javascript - 你会如何将这段 jQuery 代码重写成 ES6？

下一篇：javascript - 服务器找不到文件

javascript - 复制 iframe 上的 HTML 元素并打印

vue.js - 如何在 vue.js 组件的 props 数组中混合不同的数据类型？

javascript - 传单将坐标转换为街道地址

javascript - 如何在组件外部访问react-redux存储

laravel - npm run watch 不会根据特定更改重新加载

vuejs2 - 使用 Prop 初始化 v-model？

vue.js - Vue.js react 性如何在幕后工作？

javascript - 使用javascript计算平均值的简单方法

javascript - 使用 Nuxt.js 中间件检查 firebase 中的登录用户