vue父子组件之间互相传值，以及组件之间方法相互调用

vue使用中，经常会用到组件，好处是：
1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了；
2、页面内容会简洁一些；方便管控；
子组件的传值是通过props来传递数据，$emit来触发事件。

一、父传子值，父调用子方法
1、父组件向子组件传值（引入子组件→在引入的子组件绑定需要传送的值→子组件props接收）

<!-父组件--->
<template>
  <div>
    <child :msg="msg"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:{
    child
  }
  data () {
    return {
      msg: '父组件的值'
    }
  }
}

<!-子组件--->
<template>
  <div></div>
</template>

<script>
export default {
  props:{
      msg:{
          type:String,
          default:''
      }
  }
  mounted(){
      console.log(this.msg)
  }
}

2、父组件调用子组件方法（引入子组件→给注册的子组件注册引用信息→调用子组件方法）

<!-父组件--->
<template>
  <div>
    <child ref="child" ></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:{
    child
  }
  mounted(){
      this.$refs.child.getData() // 调用
  }
}

<!-子组件--->
<template>
  <div></div>
</template>

<script>
export default {
  methods:{
      getData(){
          console.log('父组件调用了我的方法')
      }
  }
}

二、子传父值，子调用父方法
1、子组件向父组件传值
方法一：

<!-父组件--->
<template>
  <div>
    <child @func="getData"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:{
    child
  }
  mounted(){
      getData(val){
          console.log(val) //我是子组件的数据
      }
  }
}

<!-子组件--->
<template>
  <div></div>
</template>

<script>
export default {
    data(){
        msg: "我是子组件的数据",
    }
    mounted(){
        //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
        this.$emit('func', this.msg)
     }
}

方法二：

父组件直接获取子组件里的data数据
this.$ref.child.msg

2、子组件调用父组件方法
方法一：

子组件直接通过this.$parent.event调用 //event为需要调用的父组件的事件

方法二：

子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了（与子组件向父组件传值（方法一）一致）

方法三：

父组件把方法传入子组件中，在子组件里直接调用这个方法
<!-父组件--->
<template>
  <div>
    <child :getData="getData"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:{
    child
  }
  methods:{
      getData(){
        console.log('这是父组件的方法'） 
      }
  }
}

<!-子组件--->
<template>
  <div></div>
</template>

<script>
export default {
  props:{
      getData:{
          type:Function,
          default:null
      }
  }
  mounted(){
    if(this.getData){
        this.getData()
    }
  }
}

如果数据不明确数据是否接收，可以设置watch监听传值变化。

watch: {
    msg(newValue, oldValue) {
    console.log('父组件动态更新值：', newValue)
    }
  }