局部组件是通过components属性注册的,只能在当前注册的实例范围内调用
注册局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--3:使用组件,必须在#app里面-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
</body>
<script>
// 1:创建组件构造器对象
const cpnC = Vue.extend({
// 在ES6中可以使用 `` 标识字符串 并且可以换行不需要拼接
template: `
<div>
<h2>this is cpn</h2>
<span>this is span!</span>
</div>
`
})
const vue = new Vue({
el: '#app',
data: {},
// 通过属性注册局部组件
components:{
// key 就是使用时的标签名,大写自动转中横线
myCpn: cpnC
}
})
</script>
</html>
运行效果
作者：彼岸舞
时间：2021 6 2
内容关于：VUE
本文属于作者原创,未经允许,禁止转发