在vue的页面布局中，有些地方的页面元素可以重复利用的，比如分页，上传，分享，广告幻灯等。如果没有组件，我们会在不同的页面中大量重复的写这些代码，所以vue组件的方式解决了我们代码的冗余性和开发效率问题。
这里以一个简单的计数功能为例子，说明vue中如何定义并使用我们的组件。
创建并使用组件
1. 创建/src/components/NumberCounter.vue文件，该文件为计数组件，内容如下：
<template>
<div class="count-num">
<button @click="minus">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
</template>
<script>
export default {
name: "NumberCounter",
data(){
return {num : 10}
},
methods:{
add:function(){
this.num++;
},
minus:function(){
this.num--
}
},
}
</script>
<style scoped>
</style>2. 创建文件/src/views/home/index.vue，该文件为使用我们组件的页面。
<template>
<div>
<NumberCounter></NumberCounter>
</div>
</template>
<script>
import NumberCounter from '@/components/NumberCounter'
export default {
name: "HomeIndex.vue",
components: { NumberCounter },
data() {
return {
}
},
created: function(){
},
methods: {
}
}
</script>
<style scoped>
</style>
上面的例子中实现了组件的定义和使用方法。
组件传值
有时候我们需要自定义一些参数传递给组件，比如上面的例子中，这个10是固定的，这显然不符合我们的需求，所以需要用到组件的传值功能。
1. 使用props传值(子传父)
使用props接收到的参数不可以修改，所以需要在created中赋值，修改上面的代码如下：
<template>
<div class="count-num">
<button @click="minus">-</button>
<span>{{curNum}}</span>
<button @click="add">+</button>
</div>
</template>
<script>
export default {
name: "NumberCounter",
props:{
"num":{type:Number,default:10}
},
data(){
return {
curNum:10
}
},
created() {
this.curNum = this.num
},
methods:{
add:function(){
this.curNum++;
},
minus:function(){
this.curNum--
}
},
}
</script>
<style scoped>
</style>使用方法
<NumberCounter :num="20"></NumberCounter>当然你也可以将20这个常量改为变量放在data里面。
2. 事件传值，获取组件的消息。(父传子)
上面的例子中，如果想获取组件当前的num值是多少，可以使用事件的方法this.$emit()。或者可以说是子组件向父组件传值。
组件代码修改 如下：
<template>
<div class="count-num">
<button @click="minus">-</button>
<span>{{curNum}}</span>
<button @click="add">+</button>
</div>
</template>
<script>
export default {
name: "NumberCounter",
props:{
"num":{type:Number,default:10}
},
data(){
return {
curNum:10
}
},
created() {
console.log(this.num);
this.curNum = this.num
},
methods:{
add:function(){
this.curNum++;
this.$emit('curNumFunc',this.curNum);//子组件向父组件传值
},
minus:function(){
this.curNum--
this.$emit('curNumFunc',this.curNum);//子组件向父组件传值
}
},
}
</script>
<style scoped>
</style>
<template>
<div>
<NumberCounter :num="num" @curNumFunc="getCurNum"></NumberCounter>
</div>
</template>
<script>
import NumberCounter from '@/components/NumberCounter'
export default {
name: "HomeIndex.vue",
components: { NumberCounter },
data() {
return {
num: 22
}
},
created: function(){
},
methods: {
//获取当前的Num值
getCurNum(msg){
console.log(msg);//获取子组件发送的消息
}
}
}
</script>
<style scoped>
</style>
3. 消息订阅发布的方式
安装 pubsub-js 插件： npm i pubsub-js -s 可实现全局参数传递
4. 使用EventBus传参
在main.js种挂载全局EventBus
Vue.prototype.$EventBus = new Vue()