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

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

这是我写的子组件代码:

Vue.component('list-ol',{

props:['name_en','name_cn'],

created:function(){

},

template:`

{{ name_cn }} {{ name_en }}

`

});

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:

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"

>

里面的level=1就是我想达到重复利用这个COMPONENT,只需要改里面的level=2,让这个值传到$.getJSON里进行获取不同的数据块,就可以让我list-ol里展现不同的内容,(这个level=1应该是放在list-ol组件比较好?)

一下子问了很多问题,不知道我表述的问题清楚不清楚,谢谢大家

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值