前言:component组件是Vue学习的重点中的重点。其实组件就是制作自定义的标签,这些标签在HTML中是没有的。
参考:http://jspang.com/posts/2017/02/24/vue2-2.html
一、component 初识组件
1、全局化注册组件
全局化就是在构造器的外部用Vue.component
来注册。
我们在JavaScript里注册了一个组件,在HTML中调用了它。并且它可以放到多个构造器的作用域里面。
2、局部注册组件
局部注册组件和全局注册组件是相对应的,局部注册的组件只能在组件注册作用域里进行使用,其他作用域使用无效。
从代码中你可以看出局部注册其实是写在构造器里,值得注意的是,构造器里的components
是加s
的。
3、指令和组件的区别
组件注册的是一个标签,而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多,指令用的比较少。因为指令看起来封装的没那么好,个人观点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js实例</title>
<script type="text/javascript" src="../../assets/js/vue.js"></script>
</head>
<body>
<h2>component 初识组件</h2>
<hr>
<div id="app">
<jspang></jspang>
<panda></panda>
</div>
<script type="text/javascript">
// 注册全局组件,能放到多个构造器的作用域里
Vue.component('jspang', {
template: `
<h3 style="color:red">我是全局组件</h3>
`,
});
var app = new Vue({ //构造器
el: '#app',
// 注册局部组件,只能在组件注册的作用域里使用,其他作用域无用
components: {
'panda': {
template: `
<h3 style="color:green">我是局部组件</h3>
`,
}
}
});
</script>
</body>
</html>
二、component 组件props属性设置
props
选项就是设置和获取标签上的属性值的。定义属性的选项是props
。
1、定义属性并获得属性值
定义属性我们需要用props
选项,加上数组形式的属性名称,例如:props:['here]
。在组件的模板里读取属性值只需要用插值的形式,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component 组件props属性设置</title>
</head>
<body>
<h1>component 组件props属性设置</h1>
<hr>
<div id="app">
<panda here="China"></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:['here']
}
}
})
</script>
</body>
</html>
上面的代码定义了panda的组件,并用props
设置了here
的属性值,在here
属性值里传递了China给组件。最后输出的结果是红色字体的Panda from China.
2、属性中带 ‘-’ 的处理方式
我们在写属性是经常会加入 ‘-’ 来进行分词,比如:那这时我们在props里如果写成props:['form-here]
是错误的,我们必须用小驼峰式写法props:[fromHere]
。
html文件:
<panda from-here="China"></panda>
JavaScript文件:
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ fromHere }}.</div>`,
props:['fromHere']
}
}
})
PS:因为这里有坑,所以还是少用 - 为好。
3、在构造器里向组件中传值
把构造器中data
的值传递给组件,我们只要进行绑定即可。需要用到v-bind:xxx
。如下:
html文件:
<panda v-bind:from-here="message"></panda>
JavaScript文件:
var app=new Vue({
el:'#app',
data:{
message:'China'
},
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ fromHere}}.</div>`,
props:['here']
}
}
})