【精讲】vue框架 vue组件中的ref、props传值并修改、混合（子组件重复部分利用混合可以减少代码量的重复编写）

目录

vue组件中的ref

props传值并修改

混合（子组件重复部分利用混合可以减少代码量的重复编写）

知识点拓展：

---

第一部：vue组件中的ref

        
        
        

第二部分：props传值并修改

 续：

 知识点讲解：

功能：让组件接收外部传过来的数据
（1）传递数据：

（2）接收数据：
第一种方式（只接收）
props:['name','age' ]
第二种方式（限制类型）：
props:{
 name:Number
}
第三种方式（限制类型，限制必要性，指定默认值）
props：{
name：{
 type：String，//数值类型
required：true，//必须传值
default：‘l老王’//默认值
}
}

被用props是只读的，vue底层会监测你对props，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份
，然后修改data中的数据。
 

第三部分：混合（子组件重复部分利用混合可以减少代码量的重复编写）

 混合部分的源代码minxin.js

源代码：

minxin.js源码：

export const  minxin={

    methods:{

        showName(){

            alert(this.name);

        }

    },

    mounted(){

        console.log('你好呀');

    }

}

mixin混入：
将一个内容被同时多个子组件使用（该内容是两个子组件的共同部分）。

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：
{
  data( ) {...},
methods:{...}
....
}
第二步使用混入，例如：
（1）全局混入，vue.minxin（xxx）
 （2）局部混入，minxins:【'xxx'】

知识点拓展：

在创建子组件时，切记不能创建多个components文件，内部是单独存放所有的子组件的，若是创建多个同级的文件，那么系统会报错，所以不可以创建多个同级文件，其中包含（src文件，components文件，main.js文件等都不可以创建多个），若必要创建时，需要更改vue框架系统内部的默认的设置，否则系统就会报错，无法执行。