如何将A组件的data作为参数传递给B组件的methods去调用？

Question

如图，A组件有一个下拉列表，B组件有一个搜索按钮，该按钮有一个fetchData方法，需要取下拉列表这个组件的value作为参数进行调用，请问这个value该如何获取？

<template>
  <Form>
    <Select @on-change="changeUrl" v-model="envType" style="width:90px">
      <Option v-for="item in envOptions" :value="item.value" :key="item.name">{{ item.name }}</Option>
    </Select>
  </Form>
</template>

<script>
  data() {
    return {
      envOptions,
      MenuConfig,
      envType:'pre',
      url: ''
    }
  },
  methods:{
    changeUrl: function () {
      this.url = location.origin + '/s/' + this.envType +'/api/'
      console.log(this.url)
    }
  }
</script>  

Answer 1

<select v-on:change="sChange" v-model="search.zt" class="btn search w150 bg-4">
    <option v-for="option in search.zt_opt" :value="option">{{option}}</option>
</select>

data里面

search:{
    zt:'是否已处理',
    zt_opt:[
        '是否已处理',
        '是',
        '否'
    ]
}

通过 this.search.zt 来去选中的option值

Answer 2

谢邀！像你上面那样写,子组件获取父组件的envType不就行了！

data(){
    return {
        envType:'pre'
    }
}

子组件上调用(这样是访问父组件的)

methods:{
    test(){
        console.log(this.$parent.$data.envType);
    }
}

看你的方法changeUrl，不会是选择下拉之后要跳页面吧，跳页面的话这样可能不行！跳页面用参数,cookie或者sessionstorage吧！localstorage不建议。