定义：组件是vue里面最强的功能，可以扩展html，封装重用的代码
vue中的核心之一就是组件，所以有页面都是通过组件来管理，当组件过多时，如何进行参数的传递
父组件传参到子组件
为什么组件需要传入参数呢？
定义按钮组件
<button>修改</button>
不同的页面中有多个按钮，有的名称是‘新增’，‘提交’，‘删除’，‘退出’，‘修改’等，也有可能会有不同的样式，以及不同的函数...能不能写一个组件，传入不同来实现
1、传入不同的名称
index.vue
<Btn :title="'修改'" />
Btn.vue
<button>{{title}}</button>
1、对象的方式(1) 直接定义
props: {
title: String
}
对象的方式(2) 添加类型和默认值
props: {
title: {
type: String,
default:'按钮'
}
}
2、数组的方式
props:['title']
2、传入不同的样式
index.vue
<Btn :title="'修改'" :color="'red'" />
Btn.vue
<button :style="{color:color}">{{title}}</button>
1、对象的方式
props: {
title: String,
color: String
}
2、数组的方式
props:['title','color']
3、传入一个对象
index.vue
<Btn :obj = "obj" />
data(){
return{
obj:{title:'查看详情',color:'green',padding:'10px'}
}
}
Btn.vue
<button :style="{color:obj.color,padding:obj.padding}">{{obj.title}}</button>
接收父的参数：
1、对象的方式
props: {
obj:{
title: String,
color: String,
padding: String
}
}
2、数组的方式
props:['obj']
父组件操作子组件
ref被用来给DOM元素或子组件注册引用信息，引用信息会根据父组件的$refs对象进行注册。
如果在普通DOM元素上使用，引用信息是元素，如果在子组件上，引用信息就是组件实例
简单理解：
- 如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子
组件里定义的属性和方法。
- 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似
index.vue
<!-- 父操作子-->
<Btn :obj = "obj" ref='btn'/>
<button @click="change()">改变</button>
data(){
return{
obj:{title:'查看详情',color:'green',padding:'10px'}
}
}
methods:{
change(){
//操作子组件的属性和方法
console.log(this.$refs.btn.sub);
console.log(this.$refs.btn.action());
}
}
Btn.vue
<button :style="{color:obj.color}">{{obj.title}}</button>
接收父的参数：
props:['obj']
data(){
return{
sub:'我是子组件按钮',
}
},
methods:{
action(){
console.log('我是子组件按钮')
}
}
子组件操作父组件
$emit 实现子组件向父组件通信
vm.$emit( event, arg )
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
1、子组件传参父组件
index.vue
<!-- @e-child 监听并接收参数-->
<Btn :obj = "obj" @e-child="acceptSon" />
data(){
return{
obj:{title:'查看详情',color:'green',padding:'10px'}
}
}
methods:{
acceptSon(value){
//value就是子组件传过来的值
}
}
Btn.vue
<button :style="{color:obj.color}" @click="send()">{{obj.title}}</button>
接收父的参数：
props:['obj']
methods:{
send(){
this.$emit('e-child','子要传给父的值') //发射一个事件 把子的值传给父
}
}
2、子组件操作父组件
方法一：
index.vue
<!-- @e-child 监听并接收参数-->
<Btn :obj = "obj" :event="action" @e-child="acceptSon"/>
data(){
return{
obj:{title:'查看详情',color:'green',padding:'10px'}
}
}
methods:{
action(){ //父组件的方法
this.name = '父组件的值';
},
acceptSon(res){ //
//res()就是action函数
res()
}
}
Btn.vue
<button :style="{color:obj.color}" @click="send()">{{obj.title}}</button>
接收父的参数：
props:['obj','event']
methods:{
send(){
this.$emit('e-child',this.event) //子操作父的方法 把父的方法传入到子中处理
}
}
兄弟组件传参
场景：testA.vue和testB.vue二个子组件，testA.vue获取到testB.vue的值
index.vue
<div>
<h1>父组件：{{title}}</h1>
<testA :title="title"/>
<testB @e-child="acceptSon"/>
</div>
methods:{
acceptSon(res){ //接受testB子组件信息，同时传给testA
this.title = res
}
}
testA.vue
A组件：<button>{{title}}</button>
props:{
title:String
}
testB.vue
B组件：<input type="text" v-model="title" @input="send()" />
data(){
return{
title:'testB',
}
},
methods:{
send(){
this.$emit('e-child',this.title) //发射一个事件 把子的值传给父
}
}
