属性名称及作用
名称 | 作用 |
---|---|
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);// 绑定组件时,获取vcconsole.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:"李四"}}
mixin 混入(方式共两种)
全局混入 | Vue.mixin (xxx) |
---|---|
局部混入 | mixins:[ 'xxx' ] |
plugin 插件
1.定义插件(在
Xxx.js文件
中完成定义;名称如:src/plugin.js
)
2.使用插件:Vue.use()
scoped 样式
写法:
< style scoped >