vue如何在父組件指定點(diǎn)擊事件后向子組件傳遞參數(shù)并調(diào)用子組件的事件？

vuex完全可以搞定，并且邏輯可以區(qū)分開

可以給父組件寫一個(gè)ref屬性，父組件可以通過ref拿到子組件中的數(shù)據(jù)和方法(即例子中子組件的say方法)，這樣在父組件中就可以觸發(fā)子組件的事件了。而父組件向子組件傳參可以通過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屬性傳遞進(jìn)來的數(shù)據(jù)
      props: {
          formData: {
              type: Object,
              default: () => {
                  return {}
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

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

父組件

<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>



兩種傳值方法都在里面了?；蛘吣憧梢允褂肰UEX 不過要配置一下，你可以試一下

這不就是父子組件通信么。 可以參考下我的這篇文章 vue父子組件通信。當(dāng)然你也可以查看官方文檔

<template>
    <div>
        <button ref='btn' @click='activeChild'>點(diǎn)擊觸發(fā)子組件事件</button>
    </div>
</template>
<script>
exports default{
    methods: {
        activeChild(){
            this.$refs.btn.childMethods('aaaa')
        }
    }
}
</script>

代碼中的childMethods就是要觸發(fā)的子組件事件， ‘a(chǎn)aaa’就是要傳遞給子組件的參數(shù)