干货：vue组件的写法

目前本人接触的前端MVVM框架只有react和vue，俩个框架各有各的优势，在这里就不黑谁了，哈哈。不过现在,在公司用的是vue框架，组件是vue里的核心内容，在项目开发中组件不仅可以减少代码量，方便维护还可以把耦合性较强的模块写成可复用的组件，所以抽空在这里分享一下我知道的vue组件的写法。

废话不多说，先来段代码瞅瞅~~

HTML,JS代码

我是：{{msg}}

我是：{{message}}

渲染结果为：

我是父组件

我是子组件

上面的代码就是建一个局部作用域的组件。组件绑定了template标签在里面写dom。

第二种是通过vue.component构建组件，缺点是dom要用模板字符串书写，没有语法高亮，代码换行需要在每行末尾加\。先撸段代码瞅瞅~~

HTNL,JS代码

我是：{{msg}}

child.js代码

Vue.component('my-child',{

template:'

我是{}

',

data:function(){

return {

message:'子组件'

}

}

})

上面的代码很简单，渲染结果和第一个一样，如何不太明白的同学可以去vue官网详细看一下，这里就不多说了。

第三种是用Vue.extend,也是通过在template模板字符串里写dom,还是直接撸代码瞅瞅~~

HTML代码

我是：{{msg}}

child.js代码

(function(){

varchild= Vue.extend({

template:'

我是：{}

',

data:function(){

return {

message:'子组件'

}

}

})

new child().$mount('#my-child')

}())

渲染结果同样也和第一个一样。

第四种就是spa应用的组件写法了，废话不多说上代码

父组件代码

我是：{{msg}}

子组件代码

我是：{{message}}

上面代码是spa应用组件的基本写法，组件之间写法的区别和组件之间的数据传递在这里就不说了，组件主要有三大特性数据传递，组件内向外派发事件，组件内定义slot标签提供父组件而外增加dom。因为时间原因分享的不够详细请见谅，希望对您有些帮助。