组件交互
一、父组件向子组件传值
step: 1. 给父组件绑定自定义属性, 2. 子组件通过props接收传递的值。
父组件中:
子组件中:
export default {
props:['msg'],
};
传值情况:
1. 父组件的值改变时会改变子组件的值,直接传基本数据类型;
2. 子组件的值改变时会改变父组件的值,但是报错,子组件拿到父组件的值,通过mounted函数转换为自己的数据;
3. 父组件和子组件改变都引起值的改变,传json对象,因为传递的是地址值,所以父子组件指向的地址一致。
二、子组件向父组件传值
step: 1. 在子组件中定义触发事件的方法,2. 在方法中通过 this.$emit()触发和传值,3. 在父组件中接收该方法并存到自己的方法中。
子组件中:
<template>
<div>
<button @click="send">传给父组件</button>
</div>
</template>
<script>
export default {
data () {
return {
msg:'子组件的数据'
}
},
methods:{
send(){
this.$emit('giveTo',this.msg);
}
},
}
</script>
父组件中:
<template>
<div>
<v-child @giveTo='own' ></v-child>
{{ fromSon }}
</div>
</template>
<script>
export default {
data () {
return {
fromSon: ''
}
},
methods:{
own( val ){
this.fromSon = val ;
}
},
}
</script>
三、非父子传值
step: 1. 单独的事件中心管理组件间的通信,在vue的原型上增加一个自定义属性Event (vue实例),
2. 监听事件:$on('事件名',回调函数)接收数据 与销毁事件$off,
3. 触发事件:$emit('方法名',发送的数据) 发送数据 。
在main.js中:
<template>
<div>
这是one的数据{{msg}}
<button @click="sendTwo">点击发送给TWO</button>
</div>
</template>
<script>
export default {
data () {
return {
msg:'我是one里面的数据'
}
},
methods:{
sendTwo(){
// $emit 用来发送数据给其他组件
this.Event.$emit('twoSend',this.msg)
}
}
</script>
组件two中:<template>
<div>
我是从one拿到的数据------{{twoData}}
</div>
</template>
<script>
export default {
data () {
return {
twoData:'aaa'
}
},
mounted(){
// $on 用来接收one组件传递来的数据
this.Event.$on('twoSend',(e)=>{
this.twoData = e
})
}
}
</script>
四、is 在不同组件之间进行动态切换
1. 解决固定搭配
父组件:
<template>
<div>
<v-one>我是one内容</v-one>
</div>
</template>
one.vue中:
<template>
<div>
<slot></slot>
one组件
<slot></slot>
</div>
</template>
2. 具名插槽
slot.vue中:
<template>
<div>
<v-two>
<div slot='aa'>aaaaaa</div>
<div slot='bb'>bbbbbb</div>
<div slot='cc'>cccccc</div>
<div slot='dd'>dddddd</div>
</v-two>
</div>
</template>
two.vue中:
<template>
<div>
<slot name="aa"></slot>
<slot name="bb"></slot>
two组件
<slot name="cc"></slot>
<slot name="dd"></slot>
</div>
</template>
六、ref 注册组件引用信息,用原生的方法进行父子组件间的传值
子组件中: