特殊情况 (不要直接去修改人家的数据)

$root 能够获取到根组件的实例对象
$parent 能够获取到父组件的实例对象
$children 能够获取到子组件的实例对象集合
$refs 能够获取到子组件或者元素，
如果是子组件的话，得到的就是子组件的实例对象
如果是元素的话，得到的就是元素的DOM对象

先给子组件或者元素做一个标记，通过 ref 属性。ref="box"
这时就可以通过 this.$refs.box 去获取到了。

<div id="app" v-cloak>
    <parent></parent>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    Vue.component('parent', {
      data () {
        return {
          name: '张三丰'
        }
      },
      template: `
        <div>
          <h1 ref="myH1">Parent</h1>
          <p>{{ name }}</p>
          <button @click="fn1">$children 获取子组件们</button>
          <button @click="fn2">$refs 获取子组件与子元素</button>
          <hr />
          <son ref="mySon"></son>
        </div>
      `,

      methods: {
        fn1 () {
        //    console.log(this.$children) 获取子组件的集合
          this.$children[0].name = '张小小三'
        },

        fn2 () {
          // console.log(this.$refs['mySon'])获取子组件通过ref来命名,精准获取可以获取组件与元素
          this.$refs.mySon.name = '张小小三'
          console.log(this.$refs.myH1)

         
        }
      }
    })
    Vue.component('son', {
      data () {
        return {
          name: '张小三'
        }
      },
      template: `
        <div>
          <h1>Son</h1>
          <p>{{ name }}</p>
          <button @click="fn1">$root 获取根组件</button>
          <button @click="fn2">$parent 获取父亲组件</button>
        </div>
      `,

      methods: {
        fn1 () {
          // console.log(this.$root.msg)
          this.$root.msg = 'world'
        },

        fn2 () {
          // console.log(this.$parent.name)
          this.$parent.name = '张小丰'
        },

        fn3 () {
          alert(1111)
        }
      }
    })

    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      }
    })
  </script>