vue 父组件通过props向子组件传递数据/方法的方式

最新推荐文章于 2025-03-03 15:21:54 发布

转载最新推荐文章于 2025-03-03 15:21:54 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaomeizi/p/9183820.html

文章标签：

#javascript #ViewUI

本文介绍了一个Vue应用中子组件如何通过回调函数与父组件进行数据交互的例子。具体展示了如何在SearchBar组件中调用父组件App.vue提供的方法，并传递搜索结果。

参考网址：https://segmentfault.com/a/1190000010507616

下面栗子中，

callback是传递父组件的方法，

mutationName是传递父组件的数据，


App.vue

<search-bar class="f-fr" placeholder="请输入名字" mutationName='resetListData' :callback="callback"/>


SearchBar.vue

export default {
    name: 'SearchBar',
    data() {
        return {
            input: ''
        }
    },
    methods: {
        setName: function () {
            var input = this.input;
            if (input.trim() == '') {
                alert("empty");
            }
            else {
                Api.searchTest(this.input,this.success );
            }

        },
        success(responseData) {
            this.callback(responseData);
        },
    },
    props: ['placeholder', 'apiName', 'moduleName', 'mutationName','callback']
}