一看就懂vue父组件像子组件通讯

一般在我们用脚手架搭建了项目
主文件App.vue；

父组件
App.vue

<template>
  <div>
    <div class="prebox">
       <h1>父组件向子组件通讯</h1>
      <button @click="updataname">点击</button>
      <br/>
      <!--绑定一个值nams，子组件中使用-->
      <Child v-bind:nams="name"/>
    </div>
  </div>
</template>
<script>
  import Child from './components/child'； //看自己子组件的位置
  export default {
    components: {
      Child
    },
    data () {
      return {
         name:"这是父组件的name"
      }
    },
    methods:{
    //点击事件来改变name
      updataname(){
          this.name ='name改变了';
      }
    }
  }
</script>
<style>
.prebox{
  width: 320px;
  height: 400px;
  border: 1px solid #ccc;
}
</style>

创建子组件
child.vue

<template>
  <div class="child">
         {{nams}} //父组件中绑定的值
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      nams: String, //类型
      required: true
    }
  }
</script>
<style>
.child{
    width: 100px;
    height: 50px;
    border: 1px solid #ccc;
    margin-top: 20px;
}
</style>