Vue回顾--组件开发

一、创建项目

1.下载vue不说了，在文件夹中打开终端创建vue项目。

vue create demo-test

2.在VScode中打开项目。

项目中主要用到App.vue,main.js，以及在components中编写的组件。

二、全局与局部

1.局部的写入方式，首先是在componens下创建一个vue页面，命名为lyHead(随便都行)。

   写入内容，vue页面中的内容由三部分组成，结构、行为、样式，以下是创建了一个容器随便写了一点样式。

<template>
  <div class="ly-head">head</div>
</template>

<script>
export default {
   
}
</script>

<style>
.ly-head{
    width: 600px;
    height: 100px;
    background: rgb(0, 128, 58);

}

</style>

  局部引入，在App.vue中写入两部分，第一部分import 引入，第二部分components组件。

<template>
  <div class ="App">hello world
     <lyHead></lyHead>
  </div>   
</template>

<script>
import lyHead from './components/lyHead.vue'
export default {
      components:{
          lyHead 
      }
}
</script>

<style>
.App{
  width:600px;
  height: 500px;
  background: rgb(0, 225, 255);
}
</style>

2.全局写入，写入内容相同，引入写到main.js内，包含import和Vue.components

import Vue from 'vue'
import { component } from 'vue/types/umd'
import App from './App.vue'
import lyHead from './components/lyHead'

//处于什么环境，生成或开发
Vue.config.productionTip = false

Vue.component('lyHead',lyHead)

//创建结构渲染
new Vue({
  render: h => h(App),
}).$mount('#app')

三、样式与逻辑

1.  <style>中的样式 作用于全局，<style scoped> 作用于组件。

2.  组件通信：组件与组件之间的数据传递。

组件关系：父子关系（props,$emit）。

父传子：父组件中写入组件标签，并以动态属性的方式写入要传的内容，在子组件中用props进行数据接收。

子传父：利用$emit传递修改，emit后的第一个参数与 父组件中的@xx相同。

<script>
props:{
     title:{
       default:'happy,happy',
       validator(value){
           if(value.length > 0)
           return true
       }
     }
   }, //一些校验内容
</script>

组件关系：非父子关系。

 v-model的数据交互。

需要value+input完成