1、$emit的使用场景
子组件通过this.$emit方法 调用父组件的事件名并传递数据
子组件:
<template>
<button @click="emitEvent">点击我</button>
</template>
<script>
export default {
data() {
return {
msg: "我是子组件中的数据"
}
},
methods: {
emitEvent(){
this.$emit('my-event', this.msg)
//通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
}
}
}
</script>
父组件:
<template>
<div id="app">
<child-a @my-event="getMyEvent"></child-a>
<!--父组件中通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值-->
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
methods: {
getMyEvent(msg){
console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
}
}
}
</script>
2、$refs的使用场景
父组件调用子组件的方法,可以传递数据
父组件:
<template>
<div id="app">
<child-a ref="child"></child-a>
<!--用ref给子组件起个名字-->
<button @click="getMyEvent">点击父组件</button>
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
data() {
return {
msg: "我是父组件中的数据"
}
},
methods: {
getMyEvent(){
this.$refs.child.emitEvent(this.msg);
//调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
}
}
}
</script>
子组件:
<template>
<button>点击我</button>
</template>
<script>
export default {
methods: {
emitEvent(msg){
console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
}
}
}
</script>
3、$on的使用场景
兄弟组件之间相互传递数据
- 首先创建一个vue的空白实例(兄弟间的桥梁)
import Vue from 'vue'
export default new Vue()
- 子组件 A
使用 $emit 自定义事件把数据带过去
<template>
<div>
<span>A组件->{{msg}}</span>
<input type="button" value="把a组件数据传给b" @click ="send">
</div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
data(){
return {
msg:{
a:'111',
b:'222'
}
}
},
methods:{
send:function(){
vmson.$emit("aevent",this.msg)
}
}
}
</script>
- 子组件 B
接收方通过 $on监听自定义事件 — callback接收数据
<template>
<div>
<span>B组件,a传的的数据为->{{msg}}</span>
</div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
data(){
return {
msg: ""
}
},
mounted() {
vmson.$on("aevent",(val)=> {//监听事件aevent,回调函数要使用箭头函数;
console.log(val);//打印结果:我是a组件的数据
this.msg = val;
})
}
}
</script>
- 父组件
<template>
<div>
<childa></childa>
<br />
<childb></childb>
</div>
</template>
<script>
import childa from './childa.vue';
import childb from './childb.vue';
export default {
components:{
childa,
childb
},
data(){
return {
msg:""
}
},
methods:{}
}
</script>
4、父组件向子组件的传递数据
父组件
<template>
<div class="parent">
父组件:{{message}}
<child :my-message="message" mm="123"></child>
// 注意传递参数时要用—代替驼峰命名,HTML不区分大小写
// 通过属性传递 可传递动态属性 也可以传递静态属性 可传递数字、布尔值、数组、对象等任何类型的值
</div>
</template>
<script>
import child from '../base/child'
export default {
components:{
child
},
data(){ // 组件的data必须是函数
return {
message:'好好学习'
}
}
}
</script>
子组件
<template>
<div class="child">
子组件:{{myMessage}}+{{mm}}
</div>
</template>
<script>
export default {
props:['myMessage','mm'],// 方式一
// 方式二
// props: {
// myMessage: Array //指定传入的类型,如果类型不对,会警告
// },
// // 方式三
// props: {
// myMessage: {
// type: Array,
// default: [5,6,7] //指定默认的值
// }
// }
}
</script>
5.子向父 ($parent)
父组件把方法传入子组件中, 子组件里直接调用这个方法
父组件
<template>
<div class="parent">
<child :fatherMethod='fatherMethod'></child>// 父组件把方法传入子组件中,在子组件里直接调用这个方法
</div>
</template>
<script>
import child from '../base/child'
export default {
components:{
child
},
methods:{
fatherMethod() {
alert('我是父组件的know方法');
}
}
}
</script>
子组件
<template>
<div class="child" @click='childClick'>
</div>
</template>
<script>
export default {
// 方式一:
props:{
fatherMethod: {
type: Function,
default: null
}
},
methods:{
childClick(){
this.fatherMethod()
}
}
// 方式二:
// 或者直接通过 $parent 方法调用父组件方法
// data() {
// return {
// msg: '我是子组件传递过来的数据'
// }
// },
// methods:{
// childClick(){
// this.$parent.fatherMethod()
// }
// }
}
</script>
<style scoped>
.child{
width: 100px;
height: 100px;
background-color: blue;
}
</style>