组件

单文件组件

单文件组件即 xxx.vue文件，文件包含template,script ,style标签

• template：只能有一个子元素，一般为div
• script：js脚本，逻辑代码
• style：样式代码，scope：只在当前组件内生效

父子组件关系

• 使用子组件

<template>
  <div>
    parent
      <Son />
  </div>
</template>
<script>
  import Son from './Son'
  export default {
    name: "Parent",
    components:{
      Son
    }
  }
</script>

组件之间的通信

父 - >子 ：props,通过使用子组件的属性给子组件传递数据

子 - >父 ：emit event

1. props

Parent.vue

<template>
  <div>
    parent
    <input type="text" v-model="username" />
    <Son :name="username" />
  </div>
</template>
<script>
  import Son from './Son'
  export default {
    name: "Parent",
    data() {
      return {
        username: 'admin'
      }
    },
    components:{
      Son
    }
  }
</script>

Son.vue

<template>
  <div>
    son
    展示数据：{{name}}
  </div>
</template>

<script>
  export default {
    name: "Son",
    props:['name']  // 用props接收数据
  }
</script>

实现了父子组件的双向绑定，在Parent组件中，将数据username绑定到子组件的name属性中；在子组件中，使用props数组：name接收数据。