Vue组件传值：父传子、子传父（1）

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息
1.父传子:（子组件用props接收父组件传过来的数据）
(1)简单案例：
父组件代码

<template>
  <div>
   <Hellow msg="父传子"/> //在父组件中引入子组件，并通过msg传"父传子"这个字符串
  </div>
</template>

子组件代码

<template>
	<h1>{{msg}}</h1> //显示msg传入的值“父传子”
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      msg: String, //msg为String类型
    }
  }
</script>

（2）
父组件中的代码

<template>
  <div>
    父组件:
    <input type="text" v-model="age"> **//input标签，用v-mode监听用户输入的age值**
    <br>
    <br>
    <!-- 引入子组件 -->
    <Header :inputAge="age"></Header> //引入子组件传入age值
  </div>
</template>
<script>
   import Header from './components/Header.vue' // 导入子组件
  export default {
    components: {
      Header
    },
    data () {
      return {
        age: ''
      }
    }
  }
</script>

子组件代码

<template>
  <div>
    子组件:
    <span>{{inputAge}}</span>
  </div>
</template>
<script>
  export default {
    props: {//用props接收父组件传入的age值
      inputAge: String,
      required: true
    }
  }
</script>

2.子传父（用事件）:在子组件中定义一个方法，把数据传入到父组件中；父组件中也写出一个方法接收子组件传入的值
（1）简单案例
子组件代码

	<template>
  <div>
   <span>{{childValues}}</span> //渲染的数据
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childonClick"> //写一个触发事件,点击这个按钮时子组件的值传入到父组件中
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValues: '我是子组件的数据'
      }
    },
    //核心内容!!!!!!!!!!!!!!!!!
    methods: { //在methods定义方法
      childonClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是新写入的值
        this.$emit('childByValues', this.childValues)
      }
    }
  }
</script>

子组件代码

<template>
  <div>
    父组件:
    <span>{{age}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <Header v-on:childByValue="childByValues" />
  </div>
</template>
<script>
  import Header from './components/Header.vue' //导入组件
  export default {
    components: {
      Header
    },
    data () {
      return {
        age: ''
      }
    },
    methods: {
      childByValues: function (childValues) {
        // childValue就是子组件传过来的值
        this.age = childValues
      }
    }
  }
</script>