vue组件之间数据传递的方法实例分析

<template>
 <div id="app">
  <!--<router-view></router-view>-->
 <parentTochild :sex="sexVal"></parentTochild>
  </div>
</template>
<script>
 import parentTochild from './components/B'
 export default {
  name: 'app',
  data: function () {
   return {
    sexVal:"女"
   }
  },
  methods: {
  },
  components: {
   parentTochild
  }
 }
</script>

<template>
 <div class="b_class"> <!--外边只允许有一个跟元素-->
   <p>父组件传值给子组件</p>
   <p>姓名:{{name}}</p>
   <p>年龄:{{age}}</p>
   <p>sex:{{sex}}</p>
 </div>
</template>
<script>
 export default {
  data: function () {
   return {
    name: 'zs',
    age: 22
   }
  },
  props:['sex']
 }
</script>

<input type="button" @click="sendMsg" value="子组件值传父组件">

methods: {
   sendMsg: function () {
    this.$emit('childMsg', '值来自---子组件值')
   }
}

<p>{{message}}</p>
  <!--<router-view></router-view>-->
<parentTochild :sex="sexVal" @childMsg = "childEvent"></parentTochild>

data: function () {
   return {
    sexVal: "女",
    message: ''
   }
},
methods: {
   childEvent: function (msg) {
     this.message = msg;  // msg 来自子组件
   }
}