vue知识要点（二）

解决跨域

// 在vue项目的根目录创建vue.config.js文件
module.exports={
	devServer:{
    	proxy:{
        	"/api":{
            	target:'真实地址',  // 真实地址+/api
                pathRewrite:{
                	"^/api":""     //真实地址
                }
            }
        }
    }
}

特性继承

非props属性会添加到子组件的最外层

inheritAttrs:true(添加非props属性到最外层)，false不添加

$attrs:所有的非props属性

$listeners:所有子组件标签上绑定的方法 可以向下继承,通过v-bind="$attrs" v-on="$listeners"

计算属性传参

• 计算属性
  • 使用场景：依赖一个或多个值产生一个新值
    • 特点：可以当属性使用，不可修改，它会缓存

    computed:{
    	方法名(){
        	return 值
        },
        方法名:{
        	get(){
            	return 值
            },
            set(value){
            	......
            }
        }
    }
    - 计算属性传参
     1 将计算属性return的值变成一个function，该function可以接收参数
     xxxset(){
     	return(参数)=>{
        	return this.xxx+参数
        }
     }
    

组件之v-model

• v-model实际是props与emit的语法糖(只针对父组件的props与emit写法减化)
  • 要求： 1 props传值属性名一定要是value 2 绑定的方法一定要是@input方法，该方法只做了一件事，接收一个参数，修改value的值为该参数
  • props传值的value与@input对应的值都可以通过配制修改

    •   prop:"value(默认值)"，
        event:"input(默认值)"
      

    }

.sync基本使用

.sync是props传值时的一个修饰符，经常它修饰的值，子组件可以通过$emit修改（没有原生值与引用值的限制）

props传值通过.sync修饰

~~~ 子组件通过$emit修改传值 - ~~~ this.$emit("update:aaa","新的值") ~~~

mixin

混入：合体（二个组件在一起来） 全局使用

•   - 对象就是可以理解成我们组件内的script
    - {
    	data(){
        	return{
            	xxx:123
            }
        }
    }
    - App.vue混入xxx生成一个新的App.vue，是先混人的组件的生命周期
  

> 局部混入
	- 组件内:mixins:[导入的混入的js]，混入组件的所有生命周期都是在当前组件之前执行
    ~~~
    import 名字 from '路径'
    export default {
    	mixins:[名字]
    }
    ~~~