Vue（一）父子组件之间的通信

  最近入门学习Vue框架，备注下一些基本的要点，从父子组件之间的通信开始。

1、父组件向子组件传值

  实现父组件向子组件传值需要在子组件对象属性中添加props。

.父组件代码:

<template>
  <div>
    <child :message="parentMsg"></child>
  </div>
</template>
<script>
import child from './child'
export default {
  name: 'Communicate',
  data () {
    return {
      parentMsg: 'hello, child'
    }
  },
  components: {
    child
  }
}
</script>

.子组件代码

<template>
  <div>
    <h2>我是子组件</h2>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  props: ['message'],
  data () {
    return {
      
    }
  }
}
</script>

2、子组件向父组件传值

  目前所知晓的子组件向父组件传值有两种方法，$emit和$parent方法

（1）$emit

.父组件代码

<template>
  <div>
    <p>子组件通过$emit传值给父组件：{{childMsg}}</p>
    <child  @listen-child-props="showPropsFromChild"></child>
  </div>
</template>
<script>
import child from './child'
export default {
  name: 'Communicate',
  data () {
    return {
      childMsg: ''
    }
  },
  components: {
    child
  },
  methods: {
    // 组件通过$emit传值给父组件
    showPropsFromChild: function (data) {
      this.childMsg = data
    }
  }
}
</script>

.子组件代码

<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '我是子组件的值'
    }
  },
  mounted () {
    this.sendMsgToParent()
  },
  methods: {
    sendMsgToParent: function () {
      this.$emit('listen-child-props', this.msg)
    }
  }
}
</script>

（2）$parent

.父组件代码

<template>
  <div>
    <p>子组件通过$parent传值给父组件：{{childProps}}</p>
    <child></child>
  </div>
</template>
<script>
import child from './child'
export default {
  name: 'Communicate',
  data () {
    return {
      childProps: ''
    }
  },
  components: {
    child
  }
}
</script>

.子组件代码

<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.sendMsgToParent2()
  },
  methods: {
    sendMsgToParent2: function () {
      this.$parent.childProps = '我是子组件的值222'
    }
  }
}
</script>

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

  父组件调用子组件的方法通常通过ref来实现

.父组件代码

<template>
  <div>
    <button @click="getChildMethod">父组件调用子组件的方法</button>
    <child ref="childComponent"></child>
  </div>
</template>
<script>
import child from './child'
export default {
  name: 'Communicate',
  data () {
    return {
    }
  },
  components: {
    child
  },
  methods: {
    // 调用子组件的方法
    getChildMethod: function () {
      this.$refs.childComponent.parentGetMethod('调用子组件的方法')
    }
  }
}
</script>

.子组件代码

<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
  methods: {
    parentGetMethod: function (data) {
      alert(data)
    }
  }
}
</script>

4、子组件调用父组件方法

  子组件调用父组件方法主要通过$emit

.父组件代码

<template>
  <div>
    <child @methodToChild="sentMethodToChild"></child>
  </div>
</template>
<script>
import child from './child'
export default {
  name: 'Communicate',
  data () {
    return {
    }
  },
  components: {
    child
  },
  methods: {
    // 该方法由子组件调用
    sentMethodToChild: function () {
      console.log('子组件调用父组件的方法')
    }
  }
}
</script>

.子组件代码

<template>
  <div>
    <h2>我是子组件</h2>
    <button @click="getParentMethod">调用父组件的方法</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
  methods: {
    // 调用父组件的方法
    getParentMethod: function () {
      this.$emit('methodToChild')
    }
  }
}
</script>

参考博客：https://blog.csdn.net/suifengqianxing/article/details/73478086