vue组件化编程

一、组件化编程

组件分为单文件组件和多文件组件

单文件组件：一个文件中只包含1个组件

多文件组件：一个文件中包含n个组件

二、Vue脚手架

1.全局安装

npm install -g @vue/cli

2.创建项目

vue create vue_test

3.脚手架结构

├── public
│   └── logo.png             # LOGO
|   └── index.html           # Vue 入口模板
├── src
│   ├── api                  # Api ajax 等
│   ├── assets               # 本地静态资源
│   ├── config               # 项目基础配置，包含路由，全局设置
│   ├── components           # 业务通用组件
│   ├── core                 # 项目引导, 全局配置初始化，依赖包引入等
│   ├── router               # Vue-Router
│   ├── store                # Vuex
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── views                # 业务页面入口和常用模板
│   ├── App.vue              # Vue 模板入口
│   └── main.js              # Vue 入口 JS
│   └── permission.js        # 路由守卫(路由权限控制)
│   └── global.less          # 全局样式
├── tests                    # 测试工具
├── README.md
└── package.json             #包说明书
└── package-lock.json        #包版本控制文件
└── babel.config.js   

lintOnSave: false//关闭语法检查

4.ref属性

被用来给元素或子组件注册引用信息，获取的是组件实例对象，通过ref属性可操作dom元素

 <school ref="sch"></school>


 methods: {
    showDom() {      
      console.log(this.$refs.title)
      //sch组件实例对象
      console.log(this.$refs.sch)
    },
  },

5.Props配置

prpos是只读的

props适用于：

1. 父组件==>子组件

2. 子组件==>父组件通信（要求父先给子一个函数）

 父组件
:name='name'

子组件
//简单接受
  //props: ["name"],

  //接受的同时对数据进行类型限制
  /* props:{
    name:String,
  } */

  //接受的同时对数据进行类型限制加入默认值指令与必要性的限制
  props: {
    name: {
      type: String,
      required: true,
    }
  },

6.mixin混入

可以把多个组件共用的配置提取成一个混入对象

1.定义混合

methods: {
    showName() {
      alert(this.name)
    },
  }

2.混入混合

1.全局混入
Vue.mixin(xxx)
2、局部混入
mixins: [xxx],

7.Vue插件
新建plugins.js

在main.js中引入插件

export default {
  install(Vue) {
    Vue.filter('myslice', function (value) {
      return value.slice(0, 3)
    })
  }
}

scoped限制样式

<style scoped>
</style>

三、浏览器本地存储

1.localStorage

手动删除或者借助api删除

保存
localStorage.setItem('msg', 'hello')

读取
localStorage.getItem('msg')

删除
localStorage.removeItem('msg1')

清空
localStorage.clear()

2.sessionStorage

内容会随着浏览器窗口的关闭而消失

保存
sessionStorage.setItem('msg', 'hello')

读取
sessionStorage.getItem('msg')

删除
sessionStorage.removeItem('msg1')

清空
sessionStorage.clear()

四、组件自定义事件

适用于子组件-->父组件

子组件

子组件传值
this.$emit("name", this.name)

父组件接收
@name='name'

4.解绑自定义事件

1.解绑单个事件

this.$off("getName")

2.解绑多个事件

this.$off(["getStudentName", "demo"])

3.解绑所有事件

this.$off()

五、全局事件总线

任意组件之间互相通信

$on $off $emit都在vue的原型对象上

兄弟之间的通信$bus

1、安装全局事件总线

beforeCreate(){
Vue.prototype.$bus=this
}

2、使用事件总线

1.接收数据 
 methods: {
      demo(data){}
    },
    mounted() {
      this.$bus.$on('xxx',this.demo)
    },
2.提供数据
this.$bus.$emit('xxx',数据)

3、最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

main.js

beforeCreate() {
    Vue.prototype.$bus = this
  }

checkItem(id) {
      // 让app中对应的done值取反
      this.$bus.$emit("checkTodo", id)
    },

 mounted() {
    this.$bus.$on("checkTodo", this.checkTodo)
    this.$bus.$on("deleteTodo", this.deleteTodo)
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo", this.checkTodo)
    this.$bus.$off("deleteTodo", this.deleteTodo)
  },