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?

Vue.js
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

.

Previous: Where can I upload the video to get the outer link?

Next: The Methods method in the Vue component updates the data on how to re-render the component.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu