0

父组件中是一个筛选项选择筛选条件,子组件是调用接口返回列表数据
我想要的效果是:父组件中条件筛选好了之后点击按钮向子组件传递参数并调用子组件的事件,这种该怎么实现?

2018-04-20 提问
5 个回答
2

可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了。而父组件向子组件传参可以通过prop属性(即例子中的formData)。

父组件
<template>
  <div>
    <children ref="children" :formData="formData"></children>
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script>
  import children from './children.vue'

  export default {
  data () {
    return {
      formData:{
          name:'',
          mobile: ''
      }
    }
  },
  methods:{
    handleSubmit(){
        this.$refs.children.say();
    }
  },

  components:{
    'children': children
  }

}
</script>
子组件
<template>
  <div class="children">
    我是子组件
  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          formData: {
              type: Object,
              default: () => {
                  return {}
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          say(){
              console.log(this.childrenSay);
          }
      }
  }
</script>
0

这不就是父子组件通信么。 可以参考下我的这篇文章 vue父子组件通信。当然你也可以查看官方文档

0
<template>
    <div>
        <button ref='btn' @click='activeChild'>点击触发子组件事件</button>
    </div>
</template>
<script>
exports default{
    methods: {
        activeChild(){
            this.$refs.btn.childMethods('aaaa')
        }
    }
}
</script>

代码中的childMethods就是要触发的子组件事件, ‘aaaa’就是要传递给子组件的参数

0

父组件

<template>
  <div>
    <el-button type="text" @click="sonFun">useSon</el-button>
    <sonV ref='sonV' :mes="sonData"></sonV>
  </div>
</template>
<script>
import sonV from './test.vue';
export default {
  components: {
    sonV
  },
  data() {
    return {
      sonData: ''
    };
  },
  medthods: {
    sonFun() {
      this.sonData = '123';
      let param = 456;
      this.$refs.sonV.sonFun(param);
    }
  }
};
</script>

子组件

<template>
  <div>{{mes}}</div>
</template>
<script>
export default {
  props:['mes'],
  data(){
    return{
    }
  },
  methods:{
    sonFun(param){
      console.log(this.mes)
      console.log(param)
    }
  }
}
</script>



两种传值方法都在里面了。或者你可以使用VUEX 不过要配置一下,你可以试一下
0

vuex完全可以搞定,并且逻辑可以区分开

撰写答案

推广链接