vue入门中组件命名时需要注意的地方

下面这张图是从vue官方上截取的

其实不只是驼峰命名的prop在自定义标签中需要用等价的短横线分隔命名，组件自定义的标签名称也一样

还是官网的例子只不过我把组件的名称改为驼峰式为 blogPost

Vue.component('blogPost', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

如果在html中自定义标签想当然的认为是blogPost，并按如下的方式写将会报错

<!---->
<blogPost post-title="hello!"></blogPost>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>演示驼峰式命名的自定义标签的写法</h3>
    <!-- v-bind:post-title="..."动态传值，简写为:post-title="..."  -->
    <!-- 演示完报错信息只修改blogPost 为blog-post即可-->
    <blogPost :post-title="hello"></blogPost>
</div>
</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
    Vue.component('blogPost', {
        template: '<h3>{{ postTitle }}</h3>',
        // 在 JavaScript 中是 camelCase 的
        props: ['postTitle']
    });
    let app = new Vue({
        el: "#app",  // el即element，该vue实例要渲染的页面元素
        data: {
            hello: 'hello world!'
        }
    });
</script>
</html>

想达到的效果页面显示两行

第一行父组件的<h3> 演示驼峰式命名的自定义标签的写法</h3>

第二行动态传值给子组件的<h3>hello world!</h3>

当然<h3></h3>浏览器解析并不会显示

浏览器查看效果只显示第一行即父组件的'<h3></h3>'标签的内容，为什么呢打开浏览器开发者工具，报错信心如下：

问你注册<blogpost>组件了吗，发现没这里都是小写了并不是blogPost，我们在html中将自定义标签修改为短横线分隔命名（相对于定义组件时的驼峰式）

<blog-post post-title="hello!"></blog-post>

再来查看，达到预期效果

vue入门中组件命名时需要注意的地方

猜你喜欢