VUE子组件中的值如何提交给父组件,以进行AJAX请求不同数据?

我是比较新手,期待VUER们能给予我前进的力量,我遇到了一个问题,两天了都查不多解决办法
这是我写的子组件代码:

Vue.component('list-ol',{
    props:['name_en','name_cn'],
    created:function(){
    },
    template:`
        <li class="li-catalog pull-left">{{ name_cn }} {{ name_en }}
        <span v-on:click="$emit('pronouce', name_en)" class="glyphicon glyphicon glyphicon-headphones headphone-icon"></span></li>
             `
});

var app = new Vue({
    el:'#app',
    data:{
        catalogList:[],
        level:''
    },
    created: function(){
            this.getCatalogList();
            this.levelHandler();
    },
    methods:{
        // word由$emit回调
        // vm.$emit( eventName, […args] )
        // 参数:
        // {string} eventName
        // [...args]
        // 触发当前实例上的事件。附加参数都会传给监听器回调。

        pronouce:function(word){
            pronouceIt(word);

        },
        levelHandler:function(level){
            //Vue.set(this,'level',lvl);
            //alert(level);
        },
        getCatalogList:function(event){
            var componentObj = this;//In case of 'this' will be pointed to Jquery object
            //题外话:其中混入了JQUERY的AJAX方法,在这个过程中也花了两三天解决把这个JSON传到VUE中。。不知道有没有更好的办法解决这个问题?
            $.getJSON('getcataloglist.php', {act: 'fetchcatalog',level:'1'}, function(json, textStatus) {
                Vue.set(componentObj,'catalogList',json);
            });
        }
    }

});

这是HTML的 COMPONENT:

           <level-tip **level='1'**></level-tip>
            <ol>
                <list-ol v-on:pronouce="pronouce"
                        v-on:levelHandler ="levelHandler"
                        v-for="item in catalogList"
                        v-bind:key="item.Id"
                        v-bind:name_en="item.name_en"
                        v-bind:name_cn="item.name_cn"
                        >
                </list-ol>
                

里面的level=1就是我想达到重复利用这个COMPONENT,只需要改里面的level=2,让这个值传到$.getJSON里进行获取不同的数据块,就可以让我list-ol里展现不同的内容,(这个level=1应该是放在list-ol组件比较好?)
一下子问了很多问题,不知道我表述的问题清楚不清楚,谢谢大家

阅读 2.1k
3 个回答

第一个问题 JSON传到VUE中

可以直接用
var _this = this //写在$.getJSON前
_this.catalogList = JSON.parse(json)

第二个问题 level=1放在哪儿

如果list-ol是一个通用的组件,通用的组件只需要传给它不同的数据源,就会显示值,我一般是直接给它要显示的数据,这样更通用,如果只是给它一个level值,里面需要写获取数据的代码,这个组件就变成一个专用的了

大概看了下问题,貌似就是你想在父组件中给list子组件传值。可以用子组件里的props来解决。

百度搜 "vue 子组件 props", 看这篇文章:https://www.cnblogs.com/ygtq-...

新手上路,请多包涵

第一个问题非常感谢,这样的确解决了我的痛点,请问这个问题是属于作用域问题吗?

level=1 是放在list-ol里。我是想着组件不是可以重复利用嘛,我就想着是是这样来调用我不同的板块:
<list-ol level=1></list-ol>
<list-ol level=2></list-ol>
<list-ol level=3></list-ol>
这样来调用我自己设定不同LEVEL的数据。

PS,怎么能让我这个需求能结合你所说的通用组件?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题