vue中父组件向子组件传方法(props) (原创)

App.vue

<template>
  <div id="app">
  
    <!--方式一   :btnClick="btnClick" 则子组件需要通过props来接收 -->
     <me href="https://www.baidu.com" title="百度一下" content="百度" :btnClick="btnClick"/>
    <me href="https://www.jd.com" title="京东" content="京东商城" :btnClick="btnClick"/>
    <me href="https://www.taobao.com" title="淘宝" content="淘宝网" :btnClick="btnClick"/>
  
   
</template>
<script>
  
import me from './components/Menu'
export default {
  name: 'App',
  components: {
    me
  },
  methods:{
    btnClick(msg){
      console.log(msg);
    }
  },
   
  
}
</script>
  
<style scoped>
  
</style>

Menu.vue

<template>
  <div>
     <p>
       菜单项：
     <a :href="href" :title='title' target="_blank">{{content}}</a>
       <button @click="doClick">按钮</button>
  
     </p>
  </div>
</template>
  
<script>
export default {
  name: 'mu',
  data () {
    return {
  
    }
  },
  methods:{
    doClick(){
       console.log('do click');
       //调用方法
  
      //方式一：当父容器是使用:btnClick动态传入的属性，则需要这么调用方法
        this.btnClick('xxxx');
    
    }
  },
  //props表示可以从外部(父组件)传入的属性，
  // props中定义的属性可以作为元素自身的data和method属性来使用
  
  //方式一：
  props:['href','title','content','btnClick'],
   
}
</script>
  
<style scoped>
  
</style>

注意

1、App.vue中使用:btnClick动态绑定属性的方式传入一个函数对象

2、Menu.vue中使用props接收btnClick对象，并在方法中使用this.btnClick()调用之。