【Vue CLI ref props mixin plugin scoped】

最新推荐文章于 2024-07-31 16:33:32 发布

poop-io

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量510

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yang_72/article/details/137429227

版权

属性名称及作用

名称	作用
`ref` 属性	被用来给元素或子组件`注册`引用信息（id的替代者），应用在 `htm1 标签上获取的是真实Dom元素`；应用在`组件标签上获取的是组件实例对象vue`。
`props` 配置项	让组件`接收`外部传过来的教据， `特别注意：props 是只读的`
`mixin` 混入	可以把多个组件共用的配置提取成一个混入对象
`plugin` 插件	本质包含 install 方法的一个对象，install的`第一个参数是Vue`，第二个以后的参数是插件使用者传递的数据（x，y），用于`增强 vue`
`scoped` 样式	让样式在局部生效，防止冲突

ref 属性

	//注册 在html标签中写入
	<School ref="schoolRef"/>
	//获取
	this.$refs.schoolRef
	
	//写在导入中 默认暴露一次
	export default {
	  name: 'App',
	  data () {
	    return{
	    
	    }
	  },
	  methods:{
	    func1(){
	      // 绑定元素时,获取Dom元素
	      console.log(this.$refs);
	      // console.log(this.$refs.newRef.style.color);
	      // 绑定组件时，获取vc
	      console.log(this.$refs.schoolRef);
	    }
	  }
	}

props 配置项（只读）

	//传递数据
	<Demo namea"xox" :age="18"/>

注意：age前面加了: 通过v- bind绑定使得里面的18是数字

props 接收数据的方式

第一种方式（只接收）
props：［ 'name' , 'age' ]
第二种方式（限制类型）
age props: { name : String , age : Number ｝

第三种方式（限制类型、限制必要性、指定默认值）


        props:{
            name:{
            	// 限制类型
                 type:String,
                 //限制必要性
                 required:true,
                 //指定默认值
                 default:"李四"
             }
         }