vue父组件触发子组件方法

通常来说是子组件触发父组件的情况比较多。比如每次提交表单的时候封装了常用的选项类子组件,选好值之后将值传回父组件,父组件得到值这样的操作。这是不用初始化页面数据的情况。

但是还有其他的情况就是已经选好了谋个服装的品牌和品牌下的某个系列后(这是两个相同的组件但是在父组件不同的地方调用)

这时候我想换个品牌那么系列的子组件的数据也要跟着清空并换成另一批数据。这是后可以通过监听的方式或者props。我用的是另一种方法,通过子组件在组件刚加载(mounted或者create中)的时候就定义一个让父组件接收的方法,这和方法触发后可以在子组件进行一定的操作。注意这里是异步操作需要提前定义好this否则无法成功。

mounted () {
    var that = this
    this.$on('bridge',() => {
        that.setDefaultValue()
    })//设置接收父组件的方法
},

父组件中引入改子组件并使用

<mySelect ref="Series" :NewValue="series.NewValue" @toshow="checkSeries" @getValue="getSeries" :list="series.list" :showInput="true"></mySelect>

在组件上定义好ref然后通过$emit给子组件发送方法

this.$refs.Series.$emit('bridge')//触发选择系列子组件方法

这样就完成了父组件触发子组件的方法

猜你喜欢

转载自blog.csdn.net/qq_40816649/article/details/86497346