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

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

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

当你开始使用 Vue.js 的 components(组件) 时，会经常使用到父子组件，需要互相执行方法（mothods）的问题！

今天来说说，如何由子组件按钮（v-on:click）时，如何去执行父组件里的方法。

大致的状况说明，当您的是个CRUD网页，想把常用工具栏位，独立为一个Vue档（在这为Child.vue），以便日后共用及修改方便使用

结果当独立出来后，发现 Child 子组件的 update ，还是须要到父组件完成，因为有可能表单资料都在父组件，你在子组件点 update

变成没有用，就必须在子组件去 触动父组件的方法（mothods），以完成update的工作

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

<template lang="pug">// Parents.vue div    app-child(        v-on:update-item="updateItem(model,vuex)"    )</template>

2、再来在 script 里写上 ，虽然还没建立 Child.vue 我们还是先上

<script>// Parents.vueimport Child from './Child.vue'export default{    components: {        appChild: Child,    },    data(){        return {}    },    methods:    {        updateItme(model,vuex){            // do Something        }    }}</script>

3、建立 Child.vue 在 template 写上

<template lang="pug">// Child.vue div    a(        v-on:click="updateClick()"    ) update</template>

4、再来在 script 里写上

<script>// Child.vueexport default{    methods:    {        updateClick(){            this.$emit('update-item')         }    }}</script>

上图，可由 父组件 Parent 利用

v-on:update-item="updateItem()"

子组件 Child 利用 在方法里，利用

this.$emit('update-itme')

就以完成执行！！

可以试试喔！

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

感谢

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