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 是有效的
网友评论