欢迎加我技术交流QQ群 ：811956471
前言：组件是vue里面非常核心的东西，需要深入去了解和使用，该文章将不断更新、总结、归纳有关vue组件方面的知识点。以下梳理内容全部针对于 cli脚手架去整理，个人不喜欢用cdn方式去用vue框架。组件化是现在前端框架中一个非常重要的思想元素，将页面内容进行拆分之后，可独立维护，可复用性大大提高。
一、父组件向子组件传值：props
//在子组件中：
<template>
<div id="TopBar">
{{title_msg}}
</div>
</template>
//接收
props:{
title_msg:{
type:String,
default:"项目名称"
}
},
//在父组件中：===========================================================================
<template>
<div id="app">
<TopBar title_msg="新闻"></TopBar>
</div>
</template>
二、子组件向父组件传值：$emit
这里介绍的方法是：在子组件定义一个自定义事件，进行传递。
//在子组件中：
<template>
<div id="TopBar">
<van-nav-bar :title="title_msg" />
<button @click="val_to_parent">向父组件传值</button>
</div>
</template>
//此处不要用箭头函数
methods: {
val_to_parent: function() {
this.$emit("val", "我是来自子组件的传值")
}
}
//在父组件中=============================================
<template>
<div id="app">
<TopBar :title_msg="title" @val="receive_val"></TopBar>
</div>
</template>
methods:{
receive_val:(val)=>console.log(val)
}
三、父组件调用子组件方法：ref
eg:
//父组件
<template>
<base-alert ref="baseAlert"></base-alert>
<div @click="clickMe">click me</div>
</template>
<script>
import BaseAlert from '@/components/BaseAlert'
export default {
components: {
BaseAlert
},
methods: {
clickMe () {
//popUp 方法在子组件中定义
this.$refs.baseAlert.popUp()
}
}
}
</script>
//子组件
<template>
<div>
<div>child component</div>
</div>
</template>
<script>
export default {
data () {
return { }
},
methods: {
//定义好popUp方法
popUp () {
alert(11)
}
}
}
</script>
popUp 是函数的名字：里面可以传递参数哦
this.$refs.baseAlert.popUp(666)
popUp(val) {
console.log(vla)//666
}
四、后代组件通讯，不限制组件层级：provide/inject
不推荐在应用程序代码中直接使用，因为数据追踪比较困难，不知道那一层级声明了 provide 又或是哪些层级使用了 inject 。造成比较大的维护成本
eg:
//父组件
<template>
<div class="home">
<aa></aa>
</div>
</template>
<script>
import aa from '@/components/A.vue';
export default {
name: 'Home',
components: {aa},
data() {
return {
str:'我是home组件'
}
},
provide(){
return{
a:this.str,
b:[1,2,3]
}
},
//也可以这样
// provide:{
// a:'1111',//这种的无法访问到vue实例
// b:[1,2,3]
// }
};
</script>
在任意后代组件中：
<template>
</template>
<script>
export default {
name: 'aa',
props: ['title'],
data() {
return {}
},
inject: {
a: {
from: 'a', // 来源
default: 'parentValue' // 默认值
},
b: {
from: 'b', // 来源
default: 'parentValue' // 默认值
},
},
//也可以这样注入
// inject:['a','b']
created() {
console.log(this.a, this.b) // this.app 下面都是响应式的,因为都是同一实例下的引用
}
};
</script>
