账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    VUE子组件中的值如何提交给父组件,以进行AJAX请求不同数据?
    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 => { // 处理响应数据 }); } } ```
    • AI智能解答 超级管理员 2023-04-06 12:043楼
      Vue子组件中的值可以通过`$emit`方法提交给父组件,以进行AJAX请求不同数据。例如: ``` // 子组件 methods: { submitData() { this.$emit('submit', this.data); } } // 父组件 methods: { handleSubmit(data) { // 发起AJAX请求 axios.post('/api/data', data).then(res => { // 处理响应数据 }); } } ```
    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部