Vue组件式开发

一、组件的创建

让我们先在components目录下创建一个组件 MyChild

组件的内容是一个城市选择框

<template>
  <Select v-model="value" style="width:200px">
    <Option v-for="item in cityList" :value="item" :key="item">{
  { item }}</Option>
  </Select>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      value:'',
      cityList:[
          '北京',
          '上海',
          '广州',
          '深圳',
          '杭州',
          '武汉',
      ]
    }
  }
}
</script>

这样我们的组件就创建完成，那怎么使用呢？

二、组件的调用

一般有两种方式调用组件
1、在父组件直接引入使用

<template>
  <div id="app">
  <!-- 直接使用组件名字调用即可 -->
    <MyChild></MyChild>
  </div>
</template>

<script>
//import 引入组件