鍍金池/ 問(wèn)答/PHP  HTML/ VUE子組件中的值如何提交給父組件,以進(jìn)行AJAX請(qǐng)求不同數(shù)據(jù)?

VUE子組件中的值如何提交給父組件,以進(jìn)行AJAX請(qǐng)求不同數(shù)據(jù)?

我是比較新手,期待VUER們能給予我前進(jìn)的力量,我遇到了一個(gè)問(wèn)題,兩天了都查不多解決辦法
這是我寫的子組件代碼:

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回調(diào)
        // vm.$emit( eventName, […args] )
        // 參數(shù):
        // {string} eventName
        // [...args]
        // 觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

        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方法,在這個(gè)過(guò)程中也花了兩三天解決把這個(gè)JSON傳到VUE中。。不知道有沒(méi)有更好的辦法解決這個(gè)問(wèn)題?
            $.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就是我想達(dá)到重復(fù)利用這個(gè)COMPONENT,只需要改里面的level=2,讓這個(gè)值傳到$.getJSON里進(jìn)行獲取不同的數(shù)據(jù)塊,就可以讓我list-ol里展現(xiàn)不同的內(nèi)容,(這個(gè)level=1應(yīng)該是放在list-ol組件比較好?)
一下子問(wèn)了很多問(wèn)題,不知道我表述的問(wèn)題清楚不清楚,謝謝大家

回答
編輯回答
舊螢火

第一個(gè)問(wèn)題 JSON傳到VUE中

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

第二個(gè)問(wèn)題 level=1放在哪兒

如果list-ol是一個(gè)通用的組件,通用的組件只需要傳給它不同的數(shù)據(jù)源,就會(huì)顯示值,我一般是直接給它要顯示的數(shù)據(jù),這樣更通用,如果只是給它一個(gè)level值,里面需要寫獲取數(shù)據(jù)的代碼,這個(gè)組件就變成一個(gè)專用的了

2017年2月7日 14:01
編輯回答
只愛(ài)你

大概看了下問(wèn)題,貌似就是你想在父組件中給list子組件傳值??梢杂米咏M件里的props來(lái)解決。

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

2017年1月6日 21:39
編輯回答
毀了心

第一個(gè)問(wèn)題非常感謝,這樣的確解決了我的痛點(diǎn),請(qǐng)問(wèn)這個(gè)問(wèn)題是屬于作用域問(wèn)題嗎?

level=1 是放在list-ol里。我是想著組件不是可以重復(fù)利用嘛,我就想著是是這樣來(lái)調(diào)用我不同的板塊:
<list-ol level=1></list-ol>
<list-ol level=2></list-ol>
<list-ol level=3></list-ol>
這樣來(lái)調(diào)用我自己設(shè)定不同LEVEL的數(shù)據(jù)。

PS,怎么能讓我這個(gè)需求能結(jié)合你所說(shuō)的通用組件?

2018年7月19日 03:45