介绍

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

语法

要使用组件，就需要先注册一个组件，下面是注册一个全局组件的语法：

Vue.component(tagName,options)

解释说明：

其中tagName是组件名，由程序员自定义。
options为配置选项。
注册后，可以通过<tagName></tagName>来调用组件。

全局组件

所有实例都能够使用的组件就是全局组件，注册在实例之外的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<!-- 使用CDN引入vue-resource.js -->
		<script type="text/javascript" src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 调用一个名为hello的全局组件 -->
			<hello></hello>
		</div>

		<script type="text/javascript">
			// 注册一个全局组件,即所有实例都能够使用的组件
			Vue.component('hello', {
				template: '<h1 style="color:red">Hello World!</h1>'
			});

			var vm = new Vue({
				el: '#app'
			});
		</script>
	</body>
</html>

浏览器效果如下：

局部组件

在某个实例中注册的组件，并且只允许在该实例使用的组件就是局部组件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<!-- 使用CDN引入vue-resource.js -->
		<script type="text/javascript" src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 调用一个名为hello的全局组件 -->
			<hello></hello>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				components: {
					// 其中"hello"是局部组件的名称
					"hello": {
						template: "<h1>自定义局部组件</h1>"
					}
				}
			});
		</script>
	</body>
</html>

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop".

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<!-- 使用CDN引入vue-resource.js -->
		<script type="text/javascript" src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 调用print的全局组件，并利用msg传递数据，数据是包裹在双引号中的 -->
			<print msg="中国"></print>
		</div>

		<script type="text/javascript">
			// 注册一个名为print的全局组件
			Vue.component("print", {
				// 声明props传递参数,其中msg表示要传递的参数名,自定义,参数要放在['...']中
				props: ['msg'],
				// 参数显示是使用{{...}}
				template: '<h1 style="color:red">{{msg}}</h1>'
			})
			var vm = new Vue({
				el: '#app'
			});
		</script>
	</body>
</html>

动态Prop

动态绑定prop，绑定的vue实例中data的属性值，即当父组件的数据变化时，也会传递给子组件，导致子组件的值也发生变化。

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是子组件属性变化，父组件的属性不会跟着变化。

prop可以通过v-bind动态赋值：可以传入一个字符串；一个数字；一个布尔值；一个数组；一个对象；一个对象的所有属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<!-- 使用CDN引入vue-resource.js -->
		<script type="text/javascript" src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 调用print的全局组件，并利用msg传递数据，数据是包裹在双引号中的 -->
			<print v-bind:msg="info"></print>
		</div>

		<script type="text/javascript">
			// 注册一个名为print的全局组件
			Vue.component("print", {
				// 声明props传递参数,其中msg表示要传递的参数名,自定义,参数要放在['...']中
				props: ['msg'],
				// 参数显示是使用{{...}}
				template: '<h1 style="color:red">{{msg}}</h1>'
			})
			var vm = new Vue({
				el: '#app',
				data: {
					// 只要info的值变化就会传导到子组件中
					info: '我是动态Prop'
				}
			});
		</script>
	</body>
</html>

浏览器效果：

Prop验证

可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

type 可以是下列原生构造函数中的一个：

String
Number
Boolean
Array
Object
Date
Function
Symbol

type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。

自定义事件

自定义事件是为了解决子组件将数据传回到父组件。

使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

二木成林

发布了401 篇原创文章 · 获赞 42 · 访问量 9万+

私信关注

学习Vue（9）——组件

介绍

语法