1. 父传子

Vue实例可以看做是一个父组件，如果想要把父组件的数据传给子组件，可以在子组件中用props接受父组件中传递的数据，在子组件标签中增加一个属性来绑定父组件中的数据

1.创建Vue实例

 const vm = new Vue({
      el: '#app',

      data: {
        list: [
          { id: 1, name: 'jack', content: 'rose, where are you ?' },
          { id: 2, name: 'rose', content: 'who are you ?' },
          { id: 3, name: '小明', content: '我饿了' },
        ]
      }
    })

2.创建子组件

 Vue.component('commentlist', {
      template: `
        <ul>
          <li v-for="item in list" :key="item.id">
            <h3>评论人：{{ item.name }}</h3>
            <p>评论内容：{{ item.content }}</p>
          </li>
        </ul>
      `,
        
      // 接受数据
      props: ['list']
    })

3.在子组件标签中增加属性来接受父组件的数据

 <div id="app">
    <!-- 子组件： -->
    <commentlist :list="list"></commentlist>
  </div>

2.子传父

父组件提供一个方法，将这个方法传递给子组件，由子组件调用这个方法，将子组件要传递给父组件的数据，通过方法的参数来传递

1.创建父组件

Vue.component('parent', {
      template: `
        <div class="parent">
          <h1>这是父组件 -- 技能：{{ skill }}</h1>
      //b.将这个方法传递给子组件
          <child @fn="getSkill"></child>
        </div>
      `,

      data () {
        return {
          skill: ''
        }
      },

      methods: {
        // a 父组件中提供一个方法
        getSkill (skill) {
          // 参数skill就是子组件中传递过来的数据
          console.log('父亲接受到儿子的技能：', skill)

          this.skill = skill
        }
      }
    })

2.创建子组件

Vue.component('child', {
      template: `
        <div class="child">
          <h2>这是子组件</h2>
          <button @click="teachSkill">教父亲技能</button>
        </div>
      `,
      
      // 如果想要进入页面就传递数据，就可以在 created 钩子函数中来触发 fn
      created () {
        this.$emit('fn')
      },
      
      methods: {
        teachSkill () {
          // 调用父组件中传递过来的方法，将数据作为参数传递
          // 第一个参数：表示要调用的方法名称
          // 第二个参数：表示传递父组件的数据
          this.$emit('fn', '玩手机')
        }
      }
    })