[Vue,组件] 如何由父组件按钮去执行子组件的方法 (methods)

以下会用到 Pug 套件，请去安装 pug套件，可参考：

从头开始用 Laravel 来做CRUD -12- 架设 - npm - pug

有时我们必需由父组件的按钮去执行子组件里面的方法(mothods)，来执行某些工作，我们来试着来做

1、首先建立 Parents.vue 在 template 写上

<template lang="pug">// Parents.vue div    a(        v-on:click="updateItem"    )    app-child(        ref="appChild"    )</template>

2、再来在 script 里写上

<script>import Child from './Child.vue'export default{    components: {        appChild: Child,    },    methods:    {        updateItem(){            /** 执行子组件 methods*/            this.$refs.appChild.$emit('update')        }    }}</script>

3、建立 Child.vue 在 template 写上

<template lang="pug">div    p Child</template>

4、再来在 script 里写上

<script>export default{    methods:    {        updateClick(){            // Do Something        }    },    mounted(){        this.$on('update', function(){            this.updateClick()        });    },}</script>

利用 ref 方式，就可以达成这样的要求！

可以试试喔！

--- 相关文章 ----
[Vue,组件] 如何由父组件按钮去执行子组件的方法 (methods)
[Vue,组件] 如何由子组件按钮去执行父组件的方法 (methods)
[Vue,组件] 如何由父组件传值（Value）给子组件
[Vue,组件] 如何由子组件传值（Value）给父组件
--- 更多的文章 在痞客邦 ----
痞客邦

感谢

感谢各位的观看！
友情连结：钻头-瑜诚
文中如有技术不良或写错的部份，如您愿意指出，我们也很乐意接受您的指正，但请不要恶意攻撃，我们只是为了乐趣而写的文章。