组件
（这里的“组件”是个名词，不是动词，英文为：components）
组件的作用
vue将HTML的思路运用于网页，因此有时候需要将自己写的一个vue代码融入到另一个页面
使用组件
子组件可以根据需求定义：
<template>
<div>
<button @click="fun">这是按钮</button>
</div>
</template>
<script>
export default {
methods: {
fun:function(){
console.log('Hello world!');
}
}
}
</script>父组件需要引入子组件
<template>
<div>
<childPart />
</div>
</template>
<script>
import childPart from '@/components/childPartView.vue';
export default {
components:{
childPart
},
}
</script>其中components也可以这样写：
components:{
"childPartTemplate":childPart
}注意，这时候在父组件中使用的标签为childPartTemplate，因为你将childPart定义为childPartTemplate
子组件和父组件传递参数
父组建向子组件传递变量
使用prop向子组件传递变量，例如：
父组件：
<template>
<div>
<childPart :msg="variable" />
</div>
</template>
<script>
import childPart from '@/components/childPartView.vue';
export default {
components:{
childPart
},
data(){
return{
variable: "Hello world!"
}
}
}
</script>注意，这里的msg是对于子组件的变量名称，而variable是父组件的变量名称
对于子组件：
<template>
<div>
<button>这是按钮</button>
</div>
</template>
<script>
export default {
props: {
msg: String
}
}
</script>注意在props中要注明变量类型，例如String、int等，data中的变量不能与props重名，props中变量可以直接使用
子组件向父组件传递变量(子组件调用父组件函数)
使用emit向子组件传递变量，例如：
父组件：
<template>
<div>
<childPart @emitVariable="getVariable" />
</div>
</template>
<script>
import childPart from '@/components/childPartView.vue';
export default {
components:{
childPart
},
data(){
return{
Variable: undefined
}
}
methods: {
getVariable:function(val){
this.Variable=val;
}
}
}
</script>子组件：
<template>
<div>
<button @click="go">这是按钮</button>
</div>
</template>
<script>
export default {
data(){
return{
msg: "Hello world!"
}
}
methods: {
go:function(){
this.$emit("emitVariable", this.msg)
}
}
}
</script>父组件调用子组件中的函数
使用ref来调用子组件的函数
父组件：
<template>
<div>
<childPart ref="childRef" />
<button @click="useChildFunction">这是一个按钮</button>
</div>
</template>
<script>
import childPart from '@/components/childPartView.vue';
export default {
components:{
childPart
},
methods:{
useChildFunction(){
this.$refs.childRef.childFunction();
}
}
}
</script>子组件：
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
childFunction(){
// 子组件的函数
}
}
}
</script>全局变量跨层传递
在定义组件中
<template>
<div>
<childPart />
</div>
</template>
<script>
import childPart from '@/components/childPartView.vue';
export default {
components:{
childPart
},
data(){
return {
msgLocal: "Hello world!",
}
},
// 在这里定义全局变量
provide: {
msg: this.msgLocal,
}
}
</script>在获取组件中
<template>
<div>
</div>
</template>
<script>
export default {
inject: ['msg'],
created(){
return this.msg() // 注意以函数形式使用
}
}
</script>