1. 在Vue中[组件]是干嘛的?
组件系统是Vue中很重要的概念,它提供了一种抽象,让我们可以独立复用的小组件类构成大型应用,任意类型的界面都可以抽象称为一个组件树
2. 什么是组件?
简单来讲，组件就是自定义的HTML元素。 因为组件可以扩展HTML元素。当然浏览器是不会解析我们自定义的元素，所以解析的过程就交由 Vue 来做
3.组件使用的步骤
4.子组件和父组件
简单理解就是组件A里调用了组件B,那么A就是B的父组件,如果B里调用了C组件,那么B就是C的父组件,C就是B的子组件
vue中组件之间的传值主要由以下三种形况
- 父组件向子组件传值
- 子组件向父组件传值
- 兄弟组件之间互相传值或者是两个没有关系的组件的传值
父组件通过props与子组件传值 这个在日常开发中用的最多,简单来说我们可以通过 Prop 向子组件传递数据.用一个形象的比喻来说,父子 组件的数据传递相当于自上而下的下水管道,只能从上往下流,不能逆流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。说这么多，看代码：
//父组件
<div id="app">
<child :content="message"></child>
<!--前面这个content是要传给子组件的props 后面的message是父组件要传给子组件的内容-->
</div>
<script>
improt child from './components/child'//这里是引入子组件
exprot default {
name:'App',
components:{
child //这里是注册父组件
}
data(){
return {
message:'我来自父组件'//这里是传给子组件的信息
}
}
}
</script>
//子组件
<div>
{{}}
</div>
<script>
exprot default{
name:'childComponent',
props:{
'content':{
default:'默认值'.
type:string
}
}
}
</script>
v-bind:content = "message"（传递） =========> props:{'content'}（接收）
子组件通过$emit给父组件传值 官方文档写的是触发当前实例的事件,赋值参数都会传给监听器回调,我的理解是
//子组件
<div id="app">
<my-button @click="sayHi"></my-button>
</div>
<script>
exprot default {
name :'child',
data (){
return{
msg :'我来自子组件'
}
}
methods:{
//$emit (even,value)even是父组件要监听的函数,value是要传给父祖件的值
this.$emit('fromChild',this.msg)
}
}
</script>
//父组件
<template>
<div>
<!--监听子组件的'fromChild'事件,然后调用fatherFunc方法-->
<child v-on:fromChild='fatherFunc'></child>
</div>
</template>
<script>
improt child from './components/child'//这里同样是引入子组件
exprot default{
name:'App',
components:{
child//注册组件
},
methonds:{
fatherFunc(){
console.log(msg)//我来自子组件
}
}
}
</script>
子组件向父组件传值
(子组件)this.$emit('fromChild',this.msg)
(父组件dom)v-on:fromChild="fatherFunc"
(父组件JS)fatherFunc(msg){
//msg就是子组件传递过来的数据
}
兄弟组件之间的传值 兄弟组件之间传值有两种方法:
- 将需要改变的值放到父组件之间的传值,子组件通过props来获取父子间的值
- 通过eventbus 来实现兄弟组件之间的传值,其原理还是通过
emit来实现的,区别时现在全局建立一个空的vue对象,然后将事件绑定到改空对象上,最后该空对象来触发$on监听的事件
