父子組件間傳值和傳方法

一、傳值

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>