vue初谈组件化

组件化的思想在于,将一个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.使用组件

猜你喜欢

转载自www.cnblogs.com/hjk1124/p/12306297.html