vue父组件触发子组件方法

64 篇文章 1 订阅

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

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

这时候我想换个品牌那么系列的子组件的数据也要跟着清空并换成另一批数据。这是后可以通过监听的方式或者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')//触发选择系列子组件方法

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

Vue中,组件可以通过props将数据传递给组件,而组件可以通过事件向组件发送消息。如果你想要在组件触发组件方法,可以使用ref来引用组件,并通过该引用调用组件方法。 首先,在组件中,使用ref属性给组件添加一个引用名称。例如: ```html <template> <div> <child-component ref="child"></child-component> <button @click="triggerChildMethod">触发组件方法</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { triggerChildMethod() { this.$refs.child.childMethod(); } } } </script> ``` 在上面的例中,我们给组件添加了一个引用名称`child`,然后在组件的`triggerChildMethod`方法中,通过`this.$refs.child`来获取组件的实例,并调用组件的`childMethod`方法。 接下来,在组件中,定义一个方法组件调用。例如: ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'Hello from child component' } }, methods: { childMethod() { console.log('Child method triggered'); // 在这里编写你想要执行的逻辑 } } } </script> ``` 在上面的例中,我们定义了一个`childMethod`方法,当组件调用方法时,在控制台输出`Child method triggered`。 这样,当组件中的按钮被点击时,就触发组件方法
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值