组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展HTML元素,封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素.
Vue.js的组件的使用有3个步骤:创建组件构造器,注册组件和使用组件.
- 组件的创建和注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>组件</div>'
}
// 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
</html>
- 全局注册和局部注册
- 用Vue.component()注册组件时,组件的注册是全局的.(构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。)
- 如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册.
Vue.component('header-component', {
template: '#header',
// template: '<h1>head</h1>',
data() {
return {
msg: 'head'
}
}
})
var child = {
template: '<h2>h2</h2>'
}
new Vue({
el: '#app',
data: {
name: 'tt'
},
components: {
'child-component': child
}
})
- 父组件和子组件
var ChildOne = {
name: 'one',
template: '<div>自定义局部组件 1<two-component></two-component></div>',
components: {
'two-component': ChildTwo
}
}
var Parent = {
name: 'parent',
template: '<div>{{content}}父组件<one-component></one-component></div>',
data() {
return {
message: '父组件66666666'
}
},
components: {
'one-component': ChildOne
}
}
var vm = new Vue({
el: '#app',
components: {
'parent-component': Parent
},
data: {
'content': 1
}
});
- prop传递数据
- 使用prop,子组件获取父组件的数据
- prop是单向绑定,当父组件的属性变化时,将传导给子组件,但是反过来不会
var son = {
props: ['sonmsg'],
template: '<i>{{sonmsg}}</i>'
}
Vue.component('child', {
props: ['msg'],
template: '<div>{{msg}}<son :sonmsg="msg"></son></div>',
components: {
'son': son
}
})
new Vue({
el: '#app',
data: {
'name': 123
}
})
网友评论