当前位置：首页 > article >正文

Vue05

article 2025/3/11 10:57:17

Vue05

在这里插入图片描述

一个重要的内置关系：VueComponent.prototype.__ proto ____===Vue.prototyoe
为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法

单文件组件

注：cli的全称 command line interface

一般叫做：脚手架

具体步骤

全局安装@vue/cli
npm install -g @vue/cli
切换到你要创建项目的目录，然后使用命令创建项目
vue create xxx
启动项目
npm run serve

分析脚手架结构

babel.config.js
- 把es6 转换成 es5
package-lock.json
- 包版本控制文件
package.json
- 配置名，版本，依赖
- 常用的命令
  - serve
  - build （最后的一次编译）
  - lint （语法检查）
main.js
- npm run serve 执行后，直接去执行main.js
assets文件夹
- 放静态资源
index.html

// 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面

//开启移动端的理想视口

//配置页面图标

//配置网页的标题
<%= htmlWebpackPlugin.options.title %>

render函数

vue.js与vue.runtime.xxx.js的区别
vue.js是完整版的Vue，包含：核心功能＋模板解析器
vue.runtime.xx.js 是运行版的eVue，只包含：核心功能，没有模板解析器
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接受到的createElement函数去指定具体内容

render:h => h(App),

//完整的写法如下

render(createElement){
return createElement(‘h1’,‘你好啊’)
}

//注：h 是 createElement ，前面是传入一个实例（需要在main.js里面引入），后面的参数，第一个是标签，第二个是标签内容

ref属性

被用来给元素或子组件注册引用对象（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象
使用方式
- 打标识
- <h1 ref=“xxx”>…
- <School ref=“xxx”/>
- 获取
- this.$refs (获取全部)
- this.$refs.xxx

props配置项

//功能：让组件接收外部传过来的数据

//传递数据
<Demo name="xxx">


//接收数据

//只接收
props:['name']

//限制类型
props:{
    name:String
}

//限制类型，限制必要性，指定默认值
props:{
    name:{
        type:String,
        required:true,
        default:'老王'
    }
}


//备注：props是只读的，Vue底层回监测对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么复制props的内容到data中一份，然后去修改data中的数据

mixins配置项(混入)

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

使用方式： //第一步定义混合 //在一个单独的js文件中定义 { data(){…}, methods:{…}, … } //第二步使用混入，例如 //全局混入 Vue.mixin(xxx) //局部混入 mixins:[‘xxx’]

插件（plugins）

功能：用于增强Vue

本质：包含install 方法的一个对象，install的第一个参数是Vue，第二个以后的参数是缔造者传递的数据 //定义插件,写在一个js文件中对象.install = function(Vue,options){ //添加全局过滤器 Vue.filter(…) //添加全局指令 Vue.directive(…) //配置全局混入 Vue.mixin(…) //添加实例方法 Vue.prototype.$myMethod = function(){…} } //使用插件，在main.js import xxx from ‘./plugins’ Vue.use(xxx)

scoped样式

在style标签里面，添加该属性，防止组件之间的属性重名，导致样式被覆盖

组件的自定义事件

一种组件间通信的方式，适用于：子组件 ==> 父组件
注：a 是父组件，b 是子组件。b想给a传数据，那么就要在a中给b绑定自定义事件（事件的回调在a中）
绑定自定义事件
- 在父组件中：<Demp @xxx=“xxx”>或<Demp v-on:xxx=“xxx”>
- 在父组件中<Demo ref=“demo”/>,在其mounted钩子中写mounted(){ this.$refs.xxx.$on(‘xxxx’,this.fuanc)
- 若想让自定义事件只能触发椅子，可以使用once修饰符或 $once方法
触发自定义事件：this.$emit(‘xxxx’,数据)
解绑自定义事件: this.$off(‘xxxx’)
组件上也可以绑定原生DOM事件，需要使用native修饰符
注意：通过this.$reds.xxx.$on(‘xxxx’,回调)，回调要吗配置在methods中，要么用箭头函数，否则this指向回出问题

全局事件总线

一种组件间通信的方式，适用于任意组件间通信
安装全局事件总线
使用事件总线
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

    //安装全局事件总线
    
    new Vue({
        beforeCreate(){
            Vue.prototype.$bus = this
            //安装全局事件总线，$bus就是当前应用的vm
        }
    })
    
    
    
    //使用事件总线
    //1，接收数据：A组件想接收数据，则在A组件中给$bus绑定事件，事件的回调留在A组件自身
    
    
    methods(){
        demo(data){...}
    }
    ...
    mounted(){
        this.$bus.$on('xxx',this.demo)
    }
    
    
    //2,提供数据
    
    
    this.$bus.$emit('xxx',数据)

消息订阅与发布

npm i pubsub-js 安装这个库

1. 一种组件间通信的方式，适用于任意组件间通信
  
2. 使用步骤 //1 安装pubsub //2 引入 import pubsub from 'pubsub-js' //3 接收数据：a组件想接收数据，则在a组件中订阅消息，订阅的回调留在a组件自身
  

    methods(){
        demo(data){...}
    }
    ...
    mounted(){
        this.pid = pubsub.subscribe('xxx,this.demo')//订阅消息
    }
    
    
    //4 提供数据：pubsub.publish('xxx',数据)
    
    
    //5 最好在beforeDestroy钩子中，用PubSub.unsubsceibe(pid) 去取消订阅