How does vue pass parameters to the child component and invoke the child component event after the parent component specifies a click event?

there is a filter item selection filter in the parent component, and the child component calls the interface to return list data
the effect I want is: after the conditions in the parent component are filtered, click the button to pass parameters to the child component and invoke the child component event. How can this be realized?

Mar.04,2021

can write a ref property to the parent component, and the parent component can get the data and methods in the child component through ref (that is, the say method of the example child component), so that the event of the child component can be triggered in the parent component. The parent component passes parameters to the child component through the prop property (that is, formData in the example).


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

<template>
    <div>
        <button ref='btn' @click='activeChild'></button>
    </div>
</template>
<script>
exports default{
    methods: {
        activeChild(){
            this.$refs.btn.childMethods('aaaa')
        }
    }
}
</script>
The childMethods in the

code is the child component event to be triggered, and 'aaaa' is the parameter to be passed to the child component


this is the communication between parent and child components. You can refer to my article vue parent-child component communication . Of course, you can also check ide/components.html-sharpProp" rel=" nofollow noreferrer "> official document


parent component

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

subcomponents

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



VUEX 

vuex can be handled completely, and the logic can be distinguished

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2bee0-2a81a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2bee0-2a81a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?