Vue 中涉及的 字符串模板 与 dom 模板

Dom模板(或者称为Html模板)(非字符串的模板)

Dom 模板就是写在 html 文件中，一打开就会被浏览器进行解析渲染的，所以要遵循 html 结构和标签的命名，否则浏览器不解析也就不能获取内容了

HTML 中的 标签（比如 DIV）名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，
下面的例子不会被正确渲染, 一打开会被浏览器解析成 mycomponent，但是注册的 vue 的组件是 MyComponent，因此无法渲染

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中是 PascalCase (首字母大写命名) 的不会被渲染 -->
            <MyComponent></MyComponent>
            <!-- 在 HTML 中是 camelCase (驼峰命名) 的不会被渲染 -->
            <myComponent></myComponent>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        // 注册时：PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以
        Vue.component('MyComponent', {
            template: '<div>Hello Vue</div>'
        });
        new Vue ({
            el: '#app'
        });
    </script>
</html>


下面的例子就可以正常渲染了，这意味着当你使用 DOM 中的模板时，标签名需要使用其等价的 kebab-case (短横线分隔命名) 的方式书写

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中是 kebab-case (短横线命名) 的会被渲染 -->
            <my-component></my-component>
            <my-Component></my-Component>
            <My-component></My-component>
            <My-Component></My-Component>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        // 注册时：PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以
        Vue.component('MyComponent', {
            template: '<div>Hello Vue</div>'
        });
        new Vue ({
            el: '#app'
        });
    </script>
</html>

同样，组件 props 属性也是如此
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，
下面的例子不会被正确渲染, 一打开会被浏览器解析成 posttitle，但是注册的 vue 的组件是 postTitle，因此也无法渲染

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中是 PascalCase (首字母大写命名) 的不会被渲染 -->
            <my-component PostTitle="Hello Vue"></my-component>
            <!-- 在 HTML 中是 camelCase (驼峰命名) 的不会被渲染 -->
            <my-component postTitle="Hello Vue"></my-component>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        Vue.component('MyComponent', {
            // 注册时：PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以
            props: ['postTitle'],
            template: '<h3>{{ postTitle }}</h3>'
        })
        new Vue ({
            el: '#app'
        });
    </script>
</html>

下面的例子就可以正常渲染了，这意味着当你使用 DOM 中的模板时，prop 名需要使用其等价的 kebab-case (短横线分隔命名) 的方式书写

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中是 kebab-case (短横线命名) 的会被渲染 -->
            <my-component post-title="Hello Vue"></my-component>
            <my-component Post-title="Hello Vue"></my-component>
            <my-component post-Title="Hello Vue"></my-component>
            <my-component Post-Title="Hello Vue"></my-component>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        Vue.component('MyComponent', {
            // 注册时：PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以
            props: ['postTitle'],
            template: '<h3>{{ postTitle }}</h3>'
        })
        new Vue ({
            el: '#app'
        });
    </script>
</html>

$emit 方法

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中只能是 kebab-case (短横线命名) 的会被渲染 -->
            <my-component @component-click="myClick"></my-component>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        Vue.component('MyComponent', {
            template: '<h3 @click="titleClick">Hello Vue</h3>',
            methods: {
                titleClick(){
                    // 当使用 $emit 时，命名规则只能使用 kebab-case (短横线命名)
                    this.$emit("component-click", 123)
                }
            }
        })
        new Vue ({
            el: '#app',
            methods: {
                myClick(val){
                    console.log(val)
                }
            }
        });
    </script>
</html>

PS：组件注册名、props 接收名、$emit名，还可以使用全小写字母命名(没有任何大写字母或者短横线)，例如：mycomponent、posttitle、componentclick，如果这样，使用时也必须按照全小写的方式书写

字符串模板（单文件组件、JSX）

字符串模板就是写在 vue 中的 template 中定义的模板，如 .vue 的单文件组件模板和定义组件时 template 属性值的模板。字符串模板不会在页面初始化时参与页面的渲染，而是会被 vue 进行解析编译之后再被浏览器渲染，所以不受限于 html 结构和标签的命名

<div id="app">
    <!-- 以下方式都可以 -->
    <MyComponent></MyComponent>
    <my-component></my-component>
</div>

Vue.component('MyComponent', {
    template: '<div>Hello Vue</div>'
})

new Vue ({
    el: '#app'
});

<div id="app">
    <!-- 以下方式都可以 -->
    <MyComponent postTitle="Hello Vue"></MyComponent>
    <MyComponent post-title="Hello Vue"></MyComponent>

    <my-component postTitle="Hello Vue"></my-component>
    <my-component post-title="Hello Vue"></my-component>
</div>

Vue.component('MyComponent', {
    props: ['postTitle']
    template: '<div>{{ postTitle }}</div>'
})

new Vue ({
    el: '#app'
});

<div id="app">
    <!-- 以下方式都可以 -->
    <my-component @componentClick="myClick"></my-component>
    <my-component @component-click="myClick"></my-component>
</div>

Vue.component('MyComponent', {
    template: '<div @click="titleClick">Hello Vue</div>',
    methods: {
        titleClick(){
            this.$emit("componentClick", 123)
        }
    }
})

new Vue ({
    el: '#app',
    methods: {
        myClick(val){
            console.log(val)
        }
    }
});
总结
定义组件名的方式有三种：

1、使用 kebab-case
Vue.component('my-component', { /* ... */ });
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component>


2、使用 PascalCase
Vue.component('MyComponent', { /* ... */ });
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component> 和 <MyComponent> 都是可接受的。


3、使用 camelCase
Vue.component('myComponent', { /* ... */ });
当使用 camelCase (驼峰命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component> 和 <myComponent> 都是可接受的。

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的

定义 prop 名的方式有三种：

1、使用 kebab-case
Vue.component('my-component', {
    props: ['post-title']
});
当使用 kebab-case (短横线分隔命名) 定义一个 prop 时，你也必须在引用这个自定义 prop 时使用 kebab-case，
例如 <my-component post-title="Hello Vue"></my-component>


2、使用 PascalCase
Vue.component('my-component', {
    props: ['PostTitle']
});
当使用 PascalCase (首字母大写命名) 定义一个 prop 时，你在引用这个自定义 prop 时两种命名法都可以使用。
也就是说 <my-component PostTitle="Hello Vue"></my-component> 和
<my-component post-title="Hello Vue"></my-component> 都是可接受的


3、使用 camelCase
Vue.component('my-component', {
    props: ['postTitle']
});
当使用 camelCase (驼峰命名) 定义一个 prop 时，你在引用这个自定义 prop 时两种命名法都可以使用。
也就是说 <my-component postTitle="Hello Vue"></my-component> 和
<my-component post-title="Hello Vue"></my-component> 都是可接受的

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的

$emit 使用方法和 prop 使用方法一样

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的

强烈推荐遵循 W3C 中的自定义组件名 (字母全小写且必须包含一个连字符)，这会帮助你避免和当前以及未来的 HTML 元素相冲突

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容