Vue3学习笔记-08

最新推荐文章于 2024-04-02 20:06:01 发布

JZYCLL

最新推荐文章于 2024-04-02 20:06:01 发布

阅读量146

点赞数

分类专栏： Vue 学习笔记 vue学习笔记文章标签： vue js

本文链接：https://blog.csdn.net/JZYCLL/article/details/119064666

版权

学习笔记同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue学习笔记

7 篇文章 0 订阅

订阅专栏

Vue

6 篇文章 0 订阅

订阅专栏

Vue3学习笔记-08

一、 mixin混入

两个组件共享同一个配置项。也就是说，当两个组件的所使用的methods配置项里面的功能完全一样的时候，就可以使用混合把相同的拿出来单独写，组件要使用的时候只需要引入一下即可。

使用一个js文件，命名为mixin.js, 在里面写组件需要共享的配置项：

export const mixin = {
    methods:{
        showName(){
            alert(this.name)
        }
    },
    mounted(){
        console.log("挂载结束受，执行mounted函数")
    }
}
/*export const mixin2 = {
     methods:{
        showName(){
            alert(this.name)
        }
    },
    mounted(){
        console.log("挂载结束受，执行mounted函数")
    }
}*/

在组件中引入使用：

<template>
	<div>
        <h2 @click="showName">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>
<script>
    //引入一个混合
	import {mixin} from '../mixin'
    //import {mixin,mixin2} from '../mixin'
    export default {
        name:'School',
        data(){
            return {
                name:'LYU',
        		address:'山东' 
            }
        },
        mixins:[mixin] //必须写在一个组件中
    }
</script>

混合(mixin)的作用就是复用配置项

全局混合的引入：在main.js 进行全部引入

import {mixin,mixin2} from './mixin'

Vue.mixin(mixin)

Vue.mixin(mixin2)

new Vue({
    ……
})

注意： 在main.js 中进行引入的时候，所有的组件（vc）以及vue实例都获取到了。

二、Vue中的插件

1.建议命名为plugins.js

export default {
    install(Vue){
        console.log('==========================',Vue)//这里的参数是Vue的缔造者
        //配置全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })
        
        //定义全局指令
        Vue.directive('fbind',{
            //指令与元素成功绑定的时候
            bind(element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入的时候
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析的时候
            update(element,binding){
                element.value = binding.value
            }
        })
        
        //定义混入
        Vue,mixin({
            data(){
                return {
                    name :'zhangsan',
                    x=100
                }
            }
        })
        
        //给Vue原型上添加一个方法(vm 和 vc 中都能用)
        Vue.prototype.hello = ()=>{alert('你好啊')}
        
    }
}

2.在main.js中引入插件

//引入插件
import plugins from './plugins'

//应用(使用)插件
Vue.use(plugins)

new Vue({
    ……
    ,
    methods:{
        test(){
            //调用上面的vue原型上的hello方法
            this.hello()
        }
    }
})

3.插件的功能:

功能：用于增强Vue

本质：包含install方法的一个对象，install 的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

对象.install = function (Vue,options){
 		//配置全局过滤器
		//定义混入
		……
	}

三、scoped样式

**重点：**在Vue中，定义的组件的所有样式最终都会被Vue整合在一起，这个时候就会出现一种情况就是，当在两个组件中定义样式的时候，使用相同的类名（或者id的名字也相同），那么Vue整合到一个文件中的时候，其结果就会出现冲突，这个时候样式的显示结果就会根据你在引入组建的先后顺序。后引入的组件会把先引入的组件的相同名字的样式给覆盖掉。

解决办法：

在编写组件的时候，给

注意： 在App这个组件中不适用该属性

作用：

1.让样式在局部生效，防止冲突。

2.写法：<style scoped></style>

四、Todo-list 案例

1.组件化的编码流程（通用）

①实现静态组件：抽取组件，适用组件实现静态页面效果

②展示动态数据：

(1).数据的类型、名称是什么？

(2).数据保存在那个组件？

③交互----从绑定事件监听开始

2. uuid 的使用

由于uuid的包太大，这里使用 nanoid。其作用就是使用它生成多个唯一的字符串

在VS CODE 中，在打开终端，输入 npm i nanoid 进行安装。

使用：

1.首先得引入： import {nanoid} from 'nanoid'

2.使用： const todoObj = { id:nanoid(), title:'哈哈哈', done:true}

练习例子中的数据传送路线

在这里插入图片描述

3.函数reduce()

reduce是数组上的一个函数（es6中的），用于做条件统计的。例如：在很多个学生中统计男生多少个、学生中年龄大于18的有多少个人等。

使用方法：

persons.reduce((pre,current)=>{},条件)

①其中persons 是一个数组， pre是第一个参数，表示上一次的值； current是第二个参数，表示的是当前的值。

②其中(pre,current)=>{}这个函数会被调用多次，调用的次数取决于persons这个数组的大小。

③在控制台输出current的时候，其结果是persons中的对象

第一次调用(pre,current)=>{}函数的时候，pre的值为0（因为统计的初始条件是0）；第二次调用的时候，pre的值上一次调用(pre,current)=>{} 函数的返回值。

例子：

<script>
   	data(){
        return{
            todos:[
                {
                    id:'001',
                	name:'t',
                	done:true
                },
                {
                    id:'002',
                	name:'m',
                	done:false
                },
                {
                    id:'00',
                	name:'p',
                	done:false
                },
            ]
        }
    },
    computed:{
        doneTotal(){
            this.todos.reduce((pre,current)=>{
               console.log(pre)
           	//第一次调用`(pre,current)=>{}`函数的时候，pre的值为0（因为统计的初始条件是0）；
            //第二次调用的时候，pre的值上一次调用`(pre,current)=>{}` 函数的返回值。
               return pre+1 //如果没有写返回值，那么第二次的时候，会找不到pre的值，控制台输出显示：undefind
            },0)
        }
    }
</script>

4.总结：

①组件化编程：（流程）

（1）拆分静态组件：组件要按要求的功能点拆分，命名不要与html元素冲突

（2）实现动态组价：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

<1> 一个组件在用：放在组件自身即可。

<2> 一些组件在用：放在共同的父组件上（状态提升）。

<3> 实现交互：从绑定事件开始。

②props 适用于：

（1）父组件 ==> 子组件通信

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

③使用v-model的时候，要注意，v-model绑定的值不能是props传过来的值，因为props是不可以修改的。

④props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但Vue官方不推荐这样做。

五、练习的例子

针对之前的所学的知识点进行了一个简单模块的实现，用于巩固之前的知识点。

由于代码过多，所以放在了例外一个笔记中。

具体的代码在下一个笔记中（Vue第一阶段的练习）。

点击查看练习例子的代码

JZYCLL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3学习笔记-08

Vue3学习笔记-08一、 mixin混入两个组件共享同一个配置项。也就是说，当两个组件的所使用的methods配置项里面的功能完全一样的时候，就可以使用混合把相同的拿出来单独写，组件要使用的时候只需要引入一下即可。使用一个js文件，命名为mixin.js, 在里面写组件需要共享的配置项：export const mixin = { methods:{ showName(){ alert(this.name) } },
复制链接

扫一扫