vue创建组件的两种方式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue创建组件的两种方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1252字，纯文字阅读大概需要2分钟。

内容图文

组件的两种写法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>`
})

内容总结

以上是互联网集市为您收集整理的vue创建组件的两种方式全部内容，希望文章能够帮你解决vue创建组件的两种方式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---