vue创建组件的两种方式 发布时间:2023/10/11 组件的两种写法1. //组件 //优点: 吧原有的界面内容进行解耦 可以复用 高内聚,低耦合 //注册组件 vue.extend({}) //component组件 //template let com = Vue.extend( { template: `<div> <h2>这里是使用Vue.extend创建的组件,傻逼你能看到我吗</h2> <p>{{text}}</p> <button @click="add">你已经点我了{{age}}次了,手不疼吗,人家最高点击了1000万次了</button> </div>`, //一个是全局data:{} 一个是局部 返回值函数 //全局的话是暴露在全局任何一个组件都可以使用 data() { return { text: "你吃翔吗", age: 18 } }, methods: { add() { this.age += 1 ; } }, //可以使用ES6中的模板字符串`` }) //全局组件 只能写在外面 写在里面会报错 //全局使用 Vue.component(组件名字,注册组件) Vue.component("todo",com) //render>template>outerHTML 优先级 let vm = new Vue({ el: "#app", data: { msg: "你好年轻人 奥利给" }, // template:'<div>内部的template</div>', // render:function(createElement){ // return createElement("h1","这是用来创建dom") // }, methods: {}, Comment: {}, filters: {}, beforeCreate(){}, }) 复制代码 组件的两种写法2. 这一种采用了语法糖形式 比原有的基础上少了一步 let com = Vue.extend() 语法糖写法 这个可以不写 Vue.component("todo",{ data() { return { text: "我不好", age: 18 } }, methods: { add() { this.age += 99999 ; } }, template: `<div> <h1>{{age}}</h1> <p>{{text}}</p> <button @click="add">点我加1</button> </div>` }) 复制代码