VUE脚手架组件化开发

1.组件的介绍

1.1认识组件

什么是组件？

组件就是用来实现局部（特定功能）效果的代码集合 (opens new window)（html、css、js、image....)）

组件的作用是什么？

由于一个界面的功能很复杂，组件的开发可以复用代码，简化项目编码，提高运行xiaolv。

2. 使用组件

2.1 使用组件三大步骤

🚀1.定义组件（创建组件）：

使用Vue.extend(options)创建。其中options和new Vue（options）时传入的那个options、几乎一样，但也有点区别：

• el挂载不用写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务于哪一个容器。

• data必须写成函数类型，避免组件被复用时数据存在引用关系。

🚀2.注册组件

• 局部注册：靠new vue的时候传入components选项。
• 全局注册：vue.component('组件名',组件）

🚀3.编写组件的标签（使用组件化）

2.2 脚手架的组化包

2.3 注册局部组件

1.创建MyCpn的局部组件

<template>
  <div>
    <h2>我是school组件</h2>
    <button @click="showInfo">点击查看当前的地址信息</button>
    <div id="school">
      <h3>{{name}}</h3>
      <h3>{{address}}</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: "School",
  data(){
    return {
      name: '',
      address: ''
    }
  },
  methods: {
    showInfo(){
      this.name = '尚硅谷学院'
      this.address = '尚硅谷的星光大道'
      console.log(this.name + '_' + this.address)
    }
  }
}
</script>

<style scoped>
h2{
  font-size: 30px;
  background: pink;
}

button{
  width: 300px;
  height: 40px;
  border: none;
  border-radius: 15px;
  font-size: 18px;
}

button:hover{
  background: dodgerblue;
}
</style>

2.注册组件，使用组件

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/student">student</router-link>
    </nav>
    <router-view/>
    <div>
      <!--使用局部组件-->
      <school></school>
    </div>
  </div>

</template>

<script>
import School from "./components/School";

export default {
  name: 'App',
  // 注册局部组件
  components: {
    School,
  }
}
</script>

2.4 注册全局组件

1.在main.js组件入口里注册全局组件，引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import City from "./components/City";
Vue.component('City',City)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.在app容器添加全局组件

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/student">student</router-link>
    </nav>
    <router-view/>
    <div>
      <school></school>
      <!--这里是使用全局注册的组件-->
      <city></city>
    </div>
  </div>

</template>

<script>
import School from "./components/School";

export default {
  name: 'App',
  components: {
    School,
  }
}
</script>