您的位置：首页 > 产品设计 > UI/UE

vue中的组件实现

2017-10-20 00:00 281 查看

vue中的组件实现

什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

组件和模块化的区别？

组件和模块化，例如require.js都可以实现分离开发，但组件中包含页面template模板内容，和script脚本，style样式，是一个整体的功能，导入组件即可使用。但模块化只是对js的模块化管理。

组件同样分为全局组件和局部组件：

全局组件

全局组件同vm实例内一样，可以定义自定义指令、方法、和过滤器；

其中data需要是一个函数形式，将数据结果return返回；

示例：
<div id="app">
<!-- 使用组件：组件名 -->
<hello></hello>
</div>

<script>
// 创建全局组件
// 第一个参数：表示组件名称
// 第二个参数：表示组件的配置对象
Vue.component('hello', {
// 指定组件中展示的HTML内容
// 注意：组件的模版中必须有唯一的根元素，否则，会报错
// template: '<div><h1>这是 Hello 组件</h1><div>内容</div></div>',
// ES6: 字符串模板 通过 反引号 使用
template: `
<div>
<h1>这是 Hello 组件</h1>
<div v-color>内容 --- {{ msg }} --- {{ num }}</div>
<button @click="fn">组件触发事件</button>
</div>
`,

// 注意：组件中的data需要是一个函数，函数中返回一个对象
// 返回的对象才是组件的data
data() {
return {
msg: '一场秋雨一场寒',
num: 100
}
},

methods: {
fn() {
this.num += 1
}
},

// 用法与Vue实例中的对象配置用法相同
directives: {
color(el) {
el.style.color = 'red'
}
},
filters: {}

// 使用 模板 来设置组件的内容（知道）
// template: '#tpl'
})

var vm = new Vue({
el: '#app',
data: {

}
})
</script>

局部组件

示例：
<script>
var vm = new Vue({
el: '#app',
data: {

},

// 创建局部组件
components: {
// hello 表示组件名称
// 对象表示该组件的配置对象
hello: {
template: `
<h1>局部组件</h1>
`,
// 返回的对象才是组件的data
data(){

},
methods:{

},
filters:{

}
}
}
})
</script>

使用extend方法创建组件

示例：
<body>
<div id="app">
<!-- 使用组件 -->
<hello></hello>
</div>

<script src="./vue.js"></script>
<script>
// 通过 Vue.extend() 方法创建一个基础构造器（Home 类似于 Vue构造函数）
var Home = Vue.extend({
template: `
<h1>通过 extend 方法创建 --- {{ msg }}</h1>
`,
data() {
return {
msg: '数据'
}
}
})

// Home 的用法与 Vue构造函数的用法相同
// 可以直接调用 $mount() 方法挂载到页面中,与下面Vue.component('hello', Home)作用一样。
// new Home().$mount("App")

//创建全局组件，参数1：组件名，参数2：extend()创建的基础构造器
Vue.component('hello', Home)

var vm = new Vue({
el: '#app',
data: {

}
})
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue Component

相关文章推荐

新的分享

章节导航