vue.js组件间数据传递问题

Question

两个组件A，B，分别从后端接口各自获取数据，A使用数据填充一个下拉列表(a.name的集合)，B根据A中下拉列表选择的值（a.id），请求另一个接口填充数据

A.vue

<template>
    <div>
        <select>
            <option v-for="a in as">{{ a.name }}</option>
        </select>
    </div>
</template>

B.vue

<script>
    import A from '../product/A'

    export default {
        'name': 'a',
        data() {
            return {
               as: []
            };
        },
        created: function() {
            var url = 'http://*/{{ a.id }}';
            this.$http.get(url, {}, {
                emulateJSON: true
            })
            .then(function(response) {
                console.log(response);
                this.as = response.data.data;
            }, function(response) {
                console.log(response)
            });
        },
        components: {
            'a': A
        }
    }
</script>

如上，怎么把A中selected选中的值（id）传给B中http-get的参数，求help
(A是想做一个通用的，因为在其它vue文件中也希望复用)

Answer 1

A 中的 select 加 v-model，并且添加 watcher，使得数据发生变化时 $emit 一个自定义的 change 事件，然后在 B 中使用 A 的地方绑定事件响应即可。

A 在 B 里面，没法通过 props 传递数据到 B，并且仅仅传递数据是不够的，还需要将数据变化通知到 B。另外，既然 A 的结构是这么简单，为什么不直接放 select 元素在 B 里面呢？

或者参考 https://vuejs.org/v2/guide/co... 实现 v-model

又及，A 中的 option 没有值绑定哦

Answer 2

看楼主想做的其实有点类似于级联下拉组件了。
举例来说A、B同级，都是下拉组件，C是A、B的父元素，C负责请求A、B的列表数据，C监听A的change事件。

1. C初始化后请求A需要的数据，获取到了列表数据，例如："文科、理科"，通过props传递给A。

2. A选择了理科，emit change事件。

3. C监听到change事件，请求B需要的数据，通过props传递给B。

示例：

<dropdown>
    <select-a @change="request" :data="listData.a"></select-a>
    <select-b :data="listData.b"></select-b>
</dropdown>

Answer 3

应该可以这样做：

bus.js

import Vue from 'vue'
export default new Vue()

A.vue

<template>
    <div>
        <select>
            <option  v-for="a in as" v-model.id="a.id">{{ a.name }}</option>
        </select>
    </div>
</template>

<script>
import bus from 'bus.js'
 export default {
    watch:{
        id: function (newValue, oldValue) {
            //console.log("new:"+newValue+" old:"+oldValue)
             bus.$emit('GetId',newValue)
        }
    }

}
</script>

B.vue

<script>
    import A from '../product/A'
    import bus from 'bus.js'

    export default {
        'name': 'a',
        data() {
            return {
               as: []
            };
        },
        created: function() {
            var id = this.getId()
            var url = 'http://*/'+id;
            this.$http.get(url, {}, {
                emulateJSON: true
            })
            .then(function(response) {
                console.log(response);
                this.as = response.data.data;
            }, function(response) {
                console.log(response)
            });
        },
        methods:{
            getId(){
                bus.$on('GetId',function(param){
                    return param;
                })
            }
        },
        components: {
            'a': A
        }
    }
</script>

简单说明：

里面用了Vue的监听事件：watch,还有组件之间传递数据的vm.$on,vm.$emit;

参考链接：

Vue.js的watch事件
vue.js的vm.$on和vm.$emit

Answer 4

A.vue

        <select class="form-control" v-model="id">
            <option v-for="a in as" v-bind:value="a.id">
                {{ a.name }}
            </option>
        </select>

B.vue

能通过

bus.$on('GetId', function(param) {
    return param;
})

获取到选中的id值，但是B组件中，并没有更新created方法中的id，所以没有刷新，这怎么办啊