首页 > 其他 > 详细

vue-组件

时间:2017-06-23 16:45:51      阅读:305      评论:0      收藏:0      [点我收藏+]

组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

 

1.全局组件

//全局组件必须在Vue实例化之前编写好,才能调用,否则报错

要注册一个全局组件,你可以使用 Vue.component(tagName, options)。 例如:

Vue.component(‘my-component‘, {
// 选项
})

2.局部组件

不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用:

var Child = {
template: ‘<div>A custom component!</div>‘
}
 
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
‘my-component‘: Child
}
})

这种封装也适用于其它可注册的 Vue 功能,如指令。

??:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<my-component></my-component>
<apptemp></apptemp>
</div>
<script src="js/vue.js"></script>
<script>
//创建全局组件
Vue.component(‘apptemp‘,{
template:‘<span>心中的太阳</span>‘
})
//全局组件必须在Vue实例化之前编写好,才能调用,否则报错
new Vue({
el: ‘#app‘,
data: {
msg: "世界你好"
},
components:{//局部组件
‘my-component‘:{
template:"<h1>你好,我的世界!</h1>"
}
}
})


</script>
</body>
</html>

vue-组件

原文:http://www.cnblogs.com/xzma/p/7070645.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!