1.定义全局组件
使用 Vue.component('组件名称', { })定义全局组件
//html
<div id="app">
<my-com1></my-com1> //使用组件
</div>
//js
Vue.component('myCom1', {
data: function(){
return {
//.....
}
}
template: '<h1>定义全局组件</h1>'
}
var vm = new Vue({
el: '#app',
data: {
},
methods:{
}
})
上面data代表了组件中私有的数据，template 代表我们需要渲染到页面的节点
注意：上述全局组件定义时使用了驼峰命名，在html中引用时，需要将驼峰的大写变为小写，并在之前添加 -符。
组件说白了就类似一个私有的Vue实例，可以做任何Vue实例的操作，就像下面的图片一样
上面的代码与 Vue 非常类似，但是里面的方法和数据都是私有的，不会与全局冲突。
2.定义私有组件
在Vue实例中，可以通过components来定义私有组件，如下
var vm = new Vue({
el: '#app',
data: {
},
components: [
login: {
template: '<h2>定义私有组件</h2>'
}
]
})
使用方法也与全局组件使用类似，如下
var vm = new Vue({
el: '#okok',
data: {
},
components: {
login: {
template: '<h2>{
{定义私有组件}}</h2>'
}
}
})
3.组件中的data
组件中可以定义
data并且使用{ { }}引用。
注意：组件中的template只能使用自身组件定义的data
Vue.component('myCom1', {
template: '<h1>直接{
{num}}</h1>',
data(){
return {
num: '123465'
}
}
})
上述组件定义了data，定义方式为一个函数，函数内部返回一个对象。对象中定义自己需要的数据.
这样定义的目的是为了在多次使用同样的组件时，避免这些组件使用同一个对象（数据）.
那么使用函数并return一个对象，可以重新开辟一个内存，这样就不会多次使用共享同一个对象了
4.组件传值（父 => 子）
在html中使用v-bind以及在子组件中使用props属性可以实现传值（父 => 子）
//html
<div id="app">
<my-com1 v-bind:parents = 'msg'></my-com1> // 使用 v-bind定义变量接收父组件中的 msg
</div>
//js
Vue.component('myCom1', {
template: '<h1>{
{parents}}</h1>',
props: ['parents'], //v-bind接收后，使用 props引入才能使用传入的值
data(){
return {
num: '123465'
}
}
})
var vm = new Vue({
el: '#app',
data: {
msg: '父组件中的值'
},
})
实现效果如下
若是要修改组件中msg的值，直接定义点击事件，则可以直接修改父组件中的msg
5.组件传值(子 => 父）
在子组件中传递值给父组件，需要子组件绑定父组件中的事件，并使用$emit调用父组件的方法，然后再使用$emit向方法中传值
//html
<div id="app">
<com1 @func1 = "transmit"></com1> //绑定父组件的事件
</div>
//js
var vm = new Vue({
el: '#app',
data: {
},
methods: {
transmit(data = '失败') {
console.log(`传递${
data}`)
}
},
components: {
//子组件
com1: {
template: '<input type="button" value="点击传递值给父组件" @click="myclick">',
methods: {
myclick(){
this.$emit('func1','成功') //使用 $emit() 拿到父组件的事件（第一个参数），并传递数据（可以传递多个参数）。
},
}
}
}
})
看看效果吧
点击此按钮
6.兄弟组件通信
平级的兄弟组件之间，无法直接进行传值等操作。
需要一个事件中心来充当通信的媒介，来达到传值等操作。
- 事件中心：指单独的
Vue实例（var eventHub = new Vue） - 监听、销毁事件：
eventHub.$on('add', addTodo)||eventHub.$on('add', addTodo) - 触发事件：
eventHub.$emit('add', id)
创建事件中心后，两组件可以通过在钩子函数中建立监听事件，来达到两组间相互传值的操作。