component 组件
2018-07-16 本文已影响0人
新世界的冒险
一、全局化注册组件
在javascript里注册了一个组件，在HTML中调用了他。这就是最简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里。
<!DOCTYPE html>
<html>
<head>
<title>Component 初识组件</title>
</head>
<body>
<div id='app'>
<baidu></baidu>
</div><hr>
<div id="app2">
<baidu></baidu>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
//全局注册组件，可以放在多个构造器里
Vue.component('baidu',{
template:`
<a href="http://www.baidu.com">百度</a>
`
})
var app=new Vue({
el:'#app',
data:{
}
})
var app=new Vue({
el:'#app2',
data:{
}
})
</script>
</body>
</html>
二、局部注册组件
局部注册组件和全局注册组件是相对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<!DOCTYPE html>
<html>
<head>
<title>Component 初识组件</title>
</head>
<body>
<div id='app'>
<baidu></baidu>
</div><hr>
<div id="app2">
<!-- 不可以使用 -->
<baidu></baidu>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
},
components:{
// 局部注册的baidu组件，只能在当前作用域中使用
'baidu':{
template:`
<a href="http://www.baidu.com">百度</a>
`
}
}
})
var app=new Vue({
el:'#app2',
data:{
}
})
</script>
</body>
</html>
三、组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性
