vue组件间参数与事件传递

父组件向子组件传值 以及父组件调用子组件方法

//父组件 传递
<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>