从零开始学VUE之组件化开发(注册局部组件)

原创

彼岸舞 2021-07-09 10:00:00 ©著作权

文章标签 vue 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者彼岸舞的原创作品，请联系作者获取转载授权，否则将追究法律责任

局部组件是通过components属性注册的,只能在当前注册的实例范围内调用

注册局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
</head>
<body>
<div >
    <!--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>

运行效果

从零开始学VUE之组件化开发(注册局部组件)_vue