Vue组件通信父传方法给子组件调用

// 父组件中将  :meth='changeCom1'  传入入子组件 ， 子组件运行 meth(i) 方法 并给他传参数  ,在父组件可以获取这个参数，并做相应的操作

 

// 父组件
 
<template>
  <div class="hello">
    <h1>{{h1}}</h1>
   //将changeCom1 传入
    <Com1 :hh='com1' :meth='changeCom1' :datas='datas'></Com1>
    <div>
      <button @click="com1='my is f send change info'" > 改变com1的值</button>
    </div>
  </div>
</template>
<script>
import Com1 from './com_1'
import Com2 from './com_2'
import Com3 from './com_3'
export default {
  name: 'hello',
  components:{Com1},
  data () {
    return {
      h1:'my is ff',
      com1:"my is f send info ",
      datas:[{
        name:'kk',age:18
      },{name:'k2',age:19},{name:'k3',age:20}]  
    }
  },
   methods:{
     changeCom1(i){
       this.h1=i;
       return i     
     }  
  },

 

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

子组件

//Com1 组件
<template>
    <div style="border:1px solid #000 ; width:200px ; height:600px;">
        <h2>com_1</h2>
        <p>{{hh}}</p>
        <h3>表格</h3>
        <table>
            <tr>
                <td>序号</td>
                <td>名字</td>
                <td>年龄</td>    
                <td>操作</td>             
            </tr>
            <tr v-for="(item , i ) in datas" :key="i">
                <td>{{i}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td><button @click="option(i)">按钮</button></td>
            </tr>
        </table> 
        <button @click='c1(123)'>改变父元素的值</button>
        
    </div>
</template>

<script>
export default {
  name: "com_1",
  data() {
    return {
    
    };
  },

  props: ["hh", "meth","datas"],
  methods: {
    c1(i) {
      //调用传进来的方法
      this.meth(i);
    },

    //操作
    option(i){  
        console.log(this.datas[i])
         this.meth(this.datas[i])
       
       

    }
  }
};
</script>

<style>

</style>