全局组件构建
方式1
js
Vue.component('comp1', Vue.extend({
template: '<p>我是组件</p>'
}))
html
<div id="app">
<comp1></comp1>
</div>
方式2
js
Vue.component('comp2', {
template: '<p>我是组件</p>'
})
html
<div id="app">
<comp2></comp2>
</div>
方式3
js
Vue.component('comp3', {
template: '#comp3'
})
html
<div id="app">
<comp3></comp3>
</div>
<template id="comp3">
<div>
<p>我是组件</p>
</div>
</template>
私有组件构建
js
var vm = new Vue({
el: '#app',
components: {
comp4: {
template: '#comp4'
}
}
})
html
<div id="app">
<comp4></comp4>
</div>
<template id="comp4">
<div>
<p>我是组件</p>
</div>
</template>
组件切换
方式1:通过v-if、v-else
<comp1 v-if='flag'></comp1>
<comp2 v-else></comp2>
方式2:
<component :is='compName'></component>
compName变量的值为组件名称(字符串类型)
父子组件传值
html
<div id="app">
<comp :msgs='msg'></comp>
</div>
<template id='comp'>
<div>
<p>{{ msg }}</p>
</div>
</template>
msgs是子组件接收的值,msg由父组件data中提供
js
var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
},
components: {
comp: {
template: '#comp',
props: ['msg']
}
}
})
子组件通过props接收父组件而来的数据,这种方式仅支持单向,父组件->子组件
如果子组件需要传递数据到父组件,可使用事件触发的方式传递
子组件触发父组件事件并传值
html
<div id="app">
<comp @func='parentFunc'></comp>
</div>
<template id='comp'>
<div>
<p @click='callParentFunc'>我是子组件</p>
</div>
</template>
子组件通过this.emit()触发绑定事件func,func调用父组件的parentFunc方法
js
new Vue({
el: '#app',
methods: {
parentFunc (data) {
console.log(data)
}
},
components: {
comp: {
template: '#comp',
methods: {
callParentFunc () {
this.$emit('func', 'hello vue')
}
}
}
}
})
父组件触发子组件事件
html
<div id="app">
<comp ref='comp'></comp>
</div>
<template id='comp'>
<div>
<p>我是子组件</p>
</div>
</template>
通过ref对子组件进行引用
js
new Vue({
el: '#app',
methods: {
parentFunc () {
this.$refs.comp.sonFunc()
}
},
components: {
comp: {
template: '#comp',
methods: {
sonFuc () {
console.log('hello vue')
}
}
}
}
})
父组件方法通过his.$refs.comp得到子组件的引用,可调用子组件中的data数据以及方法
同级组件传值
同级组件通信传值,需要用到事件总线bus
以下在vue脚手架搭建的项目中演示
在src/main.js中Vue.prototype绑定bus
Vue.prototype.bus = new Vue()
src/main.js代码如下
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.bus = new Vue()
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
创建pageA.vue
<template>
<div>
<p @click='send'>I am pageA</p>
</div>
</template>
<script>
export default {
name: 'pageA',
methods: {
send () {
this.bus.$emit('sendMsg', 'hello pageB')
}
}
}
</script>
pageA中的send()方法执行this.bus.$emit,触发sendMsg事件,并传递值'hello pageB',只要在同级组件中监听到sendMsg事件,就能实现通信
创建pageB.vue
<template>
<div>
<p>I am pageB</p>
</div>
</template>
<script>
export default {
name: 'pageB',
mounted () {
this.bus.$on('sendMsg', function (data) {
console.log(data)
})
}
}
</script>
在pageB.vue中的生命周期mounted阶段,通过this.bus.$on监听sendMsg事件,回调函数中接收传递而来的数据
创建page.vue,引入pageA.vue、pageB.vue
<template>
<div>
<p>I am page</p>
<pageA/>
<pageB/>
</div>
</template>
<script>
import pageA from './pageA'
import pageB from './pageB'
export default {
name: 'page',
components: {
pageA,
pageB
},
}
</script>
此时pageA与pageB为同级组件
当点击I am pageA,在pageB.vue中会接收到传递的值