博客

父组件可以使用 props 把数据及父组件的的方法传给子组件。

例：@click=’close’


子组件可以使用 $emit 触发父组件的自定义事件。

例：close(){ this.$emit(‘closeModal’)}

vm.$emit( event, arg ) //触发当前实例上的事件,arg是传递给父组件的参数
vm.$on( event, fn )    //监听event事件后运行 fn
$off(type, fn)		   //注销消息方法 type:消息名称	fn:消息回调函数

$emit:

this $emit（‘自定义事件名’,要传送的数据）；触发当前实例上的事件，要传递的数据会传给监听器；

//父组件：
<template>
	<view class="content">
        <!-- @closeModal="closeModal" 将closeBodel方法传递给子组件 -->
		<service-modal :tel="tel" @closeModal="closeModal" @tip="tip" />
	</view>
</template>

<script>
	import serviceModal from '@/components/service-modal'
	export default {
		data() {
			return {tel:"12345678900"}
		},
		components: {
			serviceModal
		},
        methods: {
			closeModal(){
				console.log("关闭弹窗方法调用")
			},
            tip(data){
				console.log(data)
			},
		},
	}
</script>
<style lang="scss"></style>

//子组件：
<template>
	<view class="modal">
		<view class="tel-tit">
			<view>客服电话</view>
		</view>
		<view class="tel-con">
			<view>{{tel}}</view>
			<view>工作时间:(09:00-18:00)</view>
		</view>
        <view class="tel-btn">
            <!-- 子组件内部点击事件closeModal -->
			<view @click="closeModal">取消</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		name:'modal',
		props: {
			tel: {
                type: [String,Number]
			},
		},
		data(){
			return{}
		},
		created() {},
		computed: {},
		methods: {
            closeModal(){ // 使用$emit调用父组件方法
				this.$emit('closeModal')
                this.$emit('tip','弹窗已被关闭！')

                // 执行完毕之后控制台会打印两句话
                //   关闭弹窗方法调用
                //   弹窗已被关闭！
			},
        },
	}
</script>
<style lang="scss" scoped></style>

$on

this.$on ( ′ 事 件 名 ′ ,callback ); callback回调emit要传送的数据

监听当前实例上的自定义事件。事件可以由vm.emit触发。回调函数会接收所有传入事件触发函数的额外参数。

注：使用$on监听后，记得使用$off`销毁事件。

$off

1)如果没有提供参数，则移除所有的事件监听器；

2)如果只提供了事件，则移除该事件所有的监听器；

3)如果同时提供了事件与回调，则只移除这个回调的监听器。

使用$on和$off后，子组件发生变化

//父组件依然使用上边$emit的父组件
//子组件：
<template>
	<view class="modal">
		<view class="tel-tit">
			<view>客服电话</view>
		</view>
		<view class="tel-con">
            // {{}} 使用插值表达式引用tel（有的人也叫它大胡子表达式）
			<view>{{tel}}</view>
			<view>工作时间:(09:00-18:00)</view>
		</view>
        <view class="tel-btn">
			<view @click="closeModal">取消</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		name:'modal',
		props: {
			tel: {
                type: [String,Number]
			},
		},
		data(){
			return{}
		},
		created() {},
		computed: {},
        mounted() {
            //使用$on去监听$emit
            //当$emit里面的数据变化的时候，就会触发$on中的第二个参数是个函数
            this.$on('closeModal',res=>{
                console.log(res);
            })
        },
        destoryed() {
            //移除事件监听
            this.$off("closeModal");
        },
		methods: {
            closeModal(){ // 使用$emit调用父组件方法
				this.$emit('closeModal')
                this.$emit('tip','弹窗已被关闭！')

                // 执行完毕之后控制台会打印两句话
                //   关闭弹窗方法调用
                //   弹窗已被关闭！
			},
        },
	}
</script>
<style lang="scss" scoped></style>

官方文档：

$emit | Vue.js