一、使用背景
正常情况下,更多推荐的是利用vuex来进行父子组件间的状态变化监听,毕竟vue是支持单向数据流的,违背了这个特性,一是不好维护,二是耦合性降低了,但是否没有了vuex,子组件就难以主动根据父组件的变化而变化呢?这里探讨一下可行的办法,供大家思考。
二、实现原理
其实子组件往外传递数据,不外乎借用$emit
的方法。试想像一个场景,比如说开发一个定时组件,出发的按钮在子组件上,需求是需要点击按钮之后,外环的秒表先跑60秒,然后内环的子组件秒表才开始计算。
这咋一看用vuex监听外环秒变化来给信号子组件就完事了,但是如果要使用$emit
呢?其实用法也一样,但是这次我们传的参数,不再是数据,而是一个子组件自己在methods
中定义的方法。
三、例子
子组件内:
<template>
<div>{
{second}}</div>
<div @click="start">开始计时</div>
</template>
<script>
export default {
data<