情况1：父组件只有一个子组件

（1）局部组件：

let Child = {
  template: '#child',
  data() {
    return {
      title: '小王 小戴',
      age: new Date()
    }
  },
  methods: {
    change() {
      return this.title.split(' ')
    }
  },
  computed: {
    newAge: function () {
      return this.age.getFullYear()
    }
  }
}

<div id="app">
  <Child></Child>
</div> 
<template id="child">
  <div>
    <p>child子组件</p>
  </div>
</template>

（2）$children父组件访问子组件，这个方法访问出来的数据是一个数组，当我们想要访问里面的数据时就需要通过数组下标的方法来提取

let vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  mounted() {
    console.log(this.$children);
    console.log(this.$children);
    console.log(this.$children.title);
    console.log(this.$children.change());
    console.log(this.$children.newAge);
  },
  components: {
    Child
  }
})

代码演示：

情况2：父组件有多个子组件

这时除了$children之外，我们还可以在根组件的视图层中的模板添加ref属性

（1）子组件child2

<template id="child2">
  <div>
    <p>child2子组件</p>
  </div>
</template>

let Child2 = {
  template: '#child2',
  data() {
    return {
      title: '网易云音乐 周杰伦',
      age: new Date()
    }
  },
  methods: {
    change() {
      return this.title.split(' ')
    }
  },
  computed: {
    newAge: function () {
      return this.age.getHours()
    }
  }
}

（2）在数据层的根组件中申明Child2

（3）在模型层的模板中添加ref

<div id="app">
  <Child ref="c"></Child> 
  <child2 ref="c2"></child2> 
</div>

（4）在数据层的根组件通过$refs来使用

代码演示：