vue创建组件的两种方式

2021-03-28 15:57:52 阅读：126 来源： 互联网

标签：vue extend 创建 age Vue template text 组件

组件的两种写法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,extend,创建,age,Vue,template,text,组件
来源： https://blog.csdn.net/hhhhs2/article/details/115282030

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue创建组件的两种方式