Vue.js最强大的功能之一绝对是组件了，组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。当它是自定义的元素时，Vue.js的编译器可以为它添加一些特殊的功能。但是在某些情况下，是可以使用原生的HTML元素的方式。先不总结，我们现在继续向下看慢慢了解。
使用组件的基本步骤
- 创建：调用Vue.extend()方法创建组件构造器
- 注册：调用Vue.component()方法注册组件
- 使用组件：在Vue实例范围内使用组件
现在我们按照以上的步骤来创建一个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<!-- #view是Vue实例挂载的元素，只能在挂载元素内使用组件 -->
<div id="view">
<my-component></my-component>
</div>
</body>
<script src='Vue.js/js/vue.min.js'></script>
<script type="text/javascript">
//1.创建一个组件构造器
var myComponent =Vue.extend({
template:'<div>this is my first component</div>'
})
//2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
Vue.component('my-component',myComponent)
new Vue({
el:'#view'
});
</script>
</html>
以上html页面显示为： this is my first component
那么代码中出现的一些方法的作用是什么呢？
Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器。
-
Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。 - 使用
Vue.component()注册组件时，需要提供两个参数，第一个参数是组件的标签，第二个参数是组件构造器。 - 组件应该挂载在某个Vue实例下，不然不会起作用。
全局注册和局部注册
调用Vue.component()注册组件时，注册的组件是全局的，这意味着该组件可以在任意Vue实例下使用。如果不需要全局注册，或者想让组件在其它的组件内也可以使用，那么可以注册局部变量。
第一个实例如果改成局部变量，那么就可以添加选项对象的component属性。
new Vue({
el:'#view',
component:{
'my-component':myComponent
}
});
父组件和子组件
当我们在一个组件中注册和使用另一个组件时，那么这两个组件就是父子组件的关系。第一个实例也可以相应修改成如下代码：
<!DOCTYPE html>
<html>
<body>
<div id="view">
<parent-component></parent-component>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var Child = Vue.extend({
template: '<p>This is a child component!</p>'
})
var Parent = Vue.extend({
// 在Parent组件内使用<child-component>标签
template :'<div><p>This is a Parent component</p><child-component></child-component></div>',
components: {
// 局部注册Child组件，该组件只能在Parent组件内使用
'child-component': Child
}
})
// 全局注册Parent组件
Vue.component('parent-component', Parent)
new Vue({
el: '#view'
})
</script>
</html>
添加了子组件的代码将会在页面中显示两行文字“This is a Parent componen"以及“This is a child component!”。那么在这次的实例中又是如何使用子组件的呢？
var Child = Vue.extend()定义了一个名为Child的组件构造器
-
var Parent = Vue.extend()定义了一个名为Parent的组件构造器 -
component:{'child-component':child}，将Child注册到Parent组件，并将组件的标签设置为child-component。 -
template :'<div><p>This is a Parent component</p><child-component></child-component></div>'在Parent组件内使用Child组件。 -
Vue.component('parent-component',Parent)全局注册Parent组件。 - 在页面中使用
<parent-component></parent-component>渲染Parent组件的内容，同时Child组件的内容也被渲染出来
注意！子组件只能在父组件中被使用。
组件注册语法糖
以上的注册方式比较繁琐，所以提供了相对比较简便的“语法糖”简化了注册的过程，比如第一个实例可以直接将script中的代码改成如下：
Vue.component('my-component',{
template:'<div>this is the first component!</div>'
})
new Vue({
el:'#view'
})
使用script和template标签
通过上面的例子，不难想到，当我们想要添加较多的html元素的时候，拼接各种html会很麻烦，同时也造成了HTML和JavaScript的高耦合性。因此，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。
-
使用
<script>标签
首先在页面中添加<script>标签，然后给标签一个ID，比如“myComponent”，将想要添加的HTML元素添加在标签内。这时得而template标签选项就不再是HTML元素，而是一个ID，Vue.js根据这个ID查找元素，然后将这个元素内的HTML作为模板进行翻译。具体代码如下：
<div id="view">
<my-component></my-component>
</div>
<script type="text/x-template" id='myComponent'>
<div>
this is a component!
</div>
</script>
<script type="text/javascript">
Vue.component('my-component',{
template:'#myComponent'
})
new Vue({
el:'#view'
})
</script>
注意！使用
<script>标签时，type应该制定为text/x-template，这样浏览器在解析HTML文档时就会知道这不是一段JavaScript脚本了。
-
使用
<template>标签
直接使用<template>标签更为方便，不用指定type属性，直接把上面所用到的<script>标签替换成<template>即可。
<template id='myComponent'>
<div>
this is a component!
</div>
</template>
使用props
组件实例的作用域是孤立的，也就是说一个子组件是不能在作用域中使用父组件的数据的。所以要使用props获取数据。
下面的代码定义了一个子组件my-component，在Vue实例中定义了data选项,为了便于理解，你可以将这个Vue实例看作my-component的父组件。
如果我们想使父组件的数据，则必须先在子组件中定义props属性，也就是props: ['myName', 'myAge']这行代码。
实例
<div id="app">
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="2">
子组件数据
</th>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
</tr>
</table>
</template>
</body>
<script src='Vue.js/js/vue.min.js'></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
name: 'keepfool',
age: 28
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
注意！在子组件中定义prop时，使用了camelCase命名法。但由于html特性不区分大小写，camelCase的prop用于特性时，需要转化为kebab-case（用短横线隔开），例如，在prop中定义的myName，在用作特性时需要转换为my-name。
prop的绑定类型
既然父组件把数据传给了子组件，那么当修改子组件的数据时，父组件是否会相应的产生影响呢？我们尝试一下修改一下上面的实例。
<div id="app">
<table>
<tr>
<th colspan="3">父组件数据</td>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">子组件数据</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
运行这个修改后的页面，可以看到当我们修改父组件的数据时，子组件也会随之更改，而当我们修改子组件的数据时，父组件不会随之更改。
vue之前的版本还有.sync指定双向绑定，.once指定单次绑定，在vue2.0已经被弃用，这里就不多说了。
好啦，关于Vue.js组件基础知识（上）就先写到这里，下面的文章将会做一个实例巩固一下哦！如果您看到了这里，请点击一个喜欢！您的每一个赞对我都是莫大的鼓励！感谢！下个文章见！
网友评论