父組件向子組件傳值 以及父組件調用子組件方法

//父組件 傳遞
<template>
  <div>
      <naver :name='name' ref="name"></naver>
      <button @click="get_name"></button>
  </div>
</template>
<script>
import naver from '@/components/nav'
export default{
  components:{
    naver
  },
  data(){
    return {
      name:'1',
    }
  },
  methods:{
    get_name(){  //這樣可以直接調用子組件方法
      this.$refs.name.get_name()
    }
  },
}
</script>

//子組件 接收
<template>
  <div>
      
  </div>
</template>
<script>
export default{
  props:{
    name:{
      default: 'may', //默認值
      type: String, //類型
    },
    name: String,//無默認值可以直接定義類型
  },
wacth(){
  name(val,oldval){
    //接收的值可以監聽, 父組件可以改變傳遞數據的值來觸發子組件的方法
  }
},
  data(){
    return {
      
    }
  },
methods:{
    get_name(){  
      return 'may'
    }
  },
}
</script>

子組件向父組件傳值 以及子組件觸發調用父組件方法

//父組件接收
<template>
  <div>
      <naver @get_name="getName"></naver>//父組件綁定自定義事件get_name來觸發自己的getName方法，通過傳參拿到子組件數據
  </div>
</template>
<script>
import naver from '@/components/nav'
export default{
  components:{
    naver
  },
data(){
    return {
      name:'',
    }
  }
},
methods:{
  getName(data){
     this.name = data
  }
}
</script>

//子組件傳遞
<template>
  <div>
      <button @click='send_name'>send</button>
  </div>
</template>
<script>

export default{
data(){
    return {
      name:'may',
    }
  }
},
methods:{
  send_name(data){
     this.$emit('get_name',this.name) //子組件通過點擊事件觸發send_name，然后通過$emit 來觸發自定義事件get_name，this.name為參數
  }
}
</script>