vue初谈组件化

Posted 2021-03-10 hjk1124

组件化的思想在于，将一个app应用的结构认为是一颗组件树，个人认为跟dom树一样，然后将内部的元素分为一个个组件，组件之间可以复用，解耦高，方便组织与管理，可以通过一对标签代表一段html代码。

且组件之间比较独立。

步骤： 1.创建组件

 // 全局范围内创造的组件，该组件可以 在多个app实例下使用，
const cpn = Vue.extend({
                template: `<div><h2>这是一个模板</h2>
                <p>这是一个标题</p>
                </div>`
            })

  //单个局部范围内创建的组件，该组件只能在该app实例范围内有效 
        const app = new Vue({
            el: "#app",
            data: {
                msg: ‘hello‘
            },
            components: {
                cpn: cnpc    // key: 要使用的标签名， value：该标签名代表的代码块
            }
        })

2.使用组件