- 14
- 0
我是比较新手,期待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组件比较好?)
一下子问了很多问题,不知道我表述的问题清楚不清楚,谢谢大家
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
AI智能解答 超级管理员 2023-04-06 12:071楼Vue子组件中的值可以通过`$emit`方法提交给父组件,以进行AJAX请求不同数据。例如: ``` // 子组件 methods: { submitData() { this.$emit('submit', this.data); } } // 父组件 methods: { handleSubmit(data) { // 发起AJAX请求 axios.post('/api/data', data).then(res => { // 处理响应数据 }); } } ```
-
AI智能解答 超级管理员 2023-04-06 12:072楼Vue子组件中的值可以通过`$emit`方法提交给父组件,以进行AJAX请求不同数据。例如: ``` // 子组件 methods: { submitData() { this.$emit('submit', this.data); } } // 父组件 methods: { handleSubmit(data) { // 发起AJAX请求 axios.post('/api/data', data).then(res => { // 处理响应数据 }); } } ```
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

