父子组件间传值和传方法

一、传值

1、父组件  传值给 子组件  

父组件中：

//在父组件中引入子组件，并传入子组件内需要的值
<template>
    <div>
        <div>父组件</div>
        <!--(3)-->
        <child :message="parentMsg"></child>
    </div>
</template>
<script>
    import child from './child' //（1）引入child组件
    export default {
        data() {
            return {
                parentMsg: '传给子组件的值' //（2）在data中定义需要传入的值
            }
        },
        components: {
            child
        }
    }
</script>    

子组件中：

//在子组件中注册props,并使用父组件中传递过来的数据
<template>
    <div>
        <div>{{message}}</div>
    </div>
</template>
<script>
    export default {
        props: {
            message: String //定义传值的类型<br>    
        },
        //或者props:["message"]
        data: {}
    }
</script>
<style>
</style>

2、子组件  传值给  父组件

在父组件中

//自定义事件childFn,事件名为parentFn（parentFn事件用于接收子组件传递过来的值）
<parent @childFn="parentFn"></parent >

data: {
   message: ''
},
methods: {
  parentFn(payload) {
      this.message = payload;
  }
}

 在子组件中：

//点击send按钮触发sendMes事件，把message传给父组件
<button @click="sendMes">Send</button>

data() {
   return {
       // 默认
       message: '我是子组件的消息'
    }
},
methods: {
  sendMes() {
        this.$emit('childFn', this.message);
  }
}    

二、调用方法

1、父组件 调用 子组件的方法

在父组件中

<template>
  <div @click="parentMethod">
    <children ref="mychild"></children>
  </div>
</template>
 
<script>
  import children from 'children.vue'
  export default {
    data(){
      return {
      }
    },
    components: {      
      children
    },
    methods:{
      parentMethod() {     
        this.$refs.mychild.childMethod(); 
      }
    }
  }
</script>

在子组件中

<template>
  <div>
  </div>
</template>
 
<script>
  export default {
    data(){
      return {      
      }
    },
    methods:{
      childMethod() {
        alert('My name is asd')
      }
    }
  }
</script>

2、子组件 调用  父组件的方法

在父组件中

<template>
  <div>
       <asd @listenToChildEvent="showMsgFromChild"></asd>
       <div>{{ sss }}</div>
  </div>
</template>

<script>
 import asd from './compontents/asd.vue'
export default {
  components:{asd},
  data () {
    return {
      sss:''
    }
   },
    methods: {
        showMsgFromChild(data){
             this.sss = data
         },
    }
}
</script>

在子组件中

<template>
  <button @click="sendMsgToParent()">
    我是子组件,点击我向父组件传值
  </button>
</template>
 
<script>
  export default {
    data(){
      return {   
        message:'我是子组件的数据'
      }
    },
    methods:{
      sendMsgToParent() {
        this.$emit("listenToChildEvent",this.message)
      }
    }
  }
</script>