1.通过选项-创建全局组件
流程:创建组件构造器->注册组件->使用
<div id="app">
<my-date></my-date>
</div>
<script src="js/vue.js"></script>
<script>
// 1.创建组件构造器
let Profile = Vue.extend({
// 模板选项
template: `
<div>
<input type="date">
<p>今天已经是冬天了!</p>
</div>
`
});
// 2.注册全局组件
Vue.component('my-date', Profile);
new Vue({
el: '#app',
});
</script>
2.通过选项-创建局部组件
在vue实例化对象里面通过components键值对注册
<div id="app">
<my-date></my-date>
<my-color></my-color>
</div>
<script src="js/vue.js"></script>
<script>
// 1.创建组件构造器
let Profile = Vue.extend({
// 模板选项
template: `
<div>
<input type="date">
<p>今天已经是冬天了!</p>
</div>
`
});
let Profile2 = Vue.extend({
template: `
<div>
<input type="color">
<p>我是一个色板!</p>
</div>
`
});
new Vue({
el: '#app',
components: {
'my-date': Profile,
'my-color': Profile2
}
});
</script>
3.通过选项-创建父子组件
<div id="app">
<parent></parent>
</div>
<script src="js/vue.js"></script>
<script>
// 1.子组件构造器
let Child1 = Vue.extend({
template: `<p>子组件1</p>>`
});
let Child2 = Vue.extend({
template: `<p>子组件2</p>>`
});
// 2.父组件构造器
Vue.component('parent', {
components: {
'my-child1': Child1,
'my-child2': Child2
},
template: `
<div>
<my-child1></my-child1>
<my-child2></my-child2>
</div>
`
})
new Vue({
el: '#app',
});
</script>
4.通过template创建组件
<div id="app">
<my-div></my-div>
</div>
<template id="my_div">
<div>
<div>我是MT!</div>
<input type="date">
</div>
</template>
<script src="js/vue.js"></script>
<script>
// 1.实例化组件
Vue.component('my-div', {
template: '#my_div'
});
new Vue({
el: '#app',
});
</script>
5.通过script创建组件
<div id="app">
<my-div></my-div>
</div>
<script type="text/template" id="my_div">
<div>
<div>我是MT!</div>
<input type="date">
</div>
</script>
<script src="js/vue.js"></script>
<script>
// 1.实例化组件
Vue.component('my-div', {
template: '#my_div'
});
new Vue({
el: '#app',
});
</script>
6.组件之间的通信
父组件传递数据给子组件
<div id="app">
<my-div message="今天要下雨" imgsrc="img/img_01.jpg"></my-div>
<my-div message="明天要下雪" imgsrc="img/img_02.jpg"></my-div>
</div>
<template id="my_div">
<div>
<h1>{{message}}</h1>
<img :src="imgsrc" width="100"> <!--不支持驼峰式写法imgSrc-->
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my-div', {
template: '#my_div',
props: ['message', 'imgsrc']
})
new Vue({
el: '#app',
});
</script>
7.多层组件之间的通信
注意:多层组件之间的属性传递必须通过动态绑定
<div id="app">
<my-parent :imgtitle="title" :imgsrc="img"></my-parent>
</div>
<template id="my_img">
<img :src="imgsrc" width="200">
</template>
<template id="my_title">
<h1>{{title}}</h1>
</template>
<template id="my_parent">
<div>
<child1 :imgsrc="imgsrc"></child1>
<child2 :title = "imgtitle"></child2>
</div>
</template>
<script src="js/vue.js"></script>
<script>
// 1.子组件的实例
let Child1 = Vue.extend({
template: '#my_img',
props: ['imgsrc']
});
let Child2 = Vue.extend({
template: '#my_title',
props: ['title']
});
// 2.注册父组件
Vue.component('my-parent', {
props: ['imgtitle', 'imgsrc'],
components: {
'child1': Child1,
'child2': Child2
},
template: '#my_parent'
})
new Vue({
el: '#app',
data: {
title: '我是不是很漂亮',
img: 'img/img_01.jpg'
}
});
</script>
8.子组件传数据给父组件,通过自定义事件来传递
<div id="app">
<my-btn @total="allCounter"></my-btn>
<my-btn @total="allCounter"></my-btn>
<my-btn @total="allCounter"></my-btn>
<my-btn @total="allCounter"></my-btn>
<p>所有按钮一共点击了{{totalCounter}}次</p>
</div>
<template id="my_btn">
<button @click="total">点击了{{counter}}次</button>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my-btn', {
template: '#my_btn',
data() {
return {
counter: 0
}
},
methods: {
total() {
this.counter += 1;
// 通知外界,调用了这个方法
this.$emit('total');
}
}
});
new Vue({
el: '#app',
data: {
totalCounter: 0
},
methods: {
allCounter() {
this.totalCounter += 1;
}
}
});
</script>