组件的使用
设置私有组件
根组件使用子组件的方式。
- 在跟组件中使用 import 导入之后定义的名字 from ‘组件的位置’
- 在跟组件中使用components注册私有组件
export default {
compoments:{
//导入组件之后的名字
}
}
- 最终将注册的组件以标签的形式写入
设置全局组件
- 首先在main.js中导入要设置的全局组件,在使用vue.component()方法。
import '导入之后的设置的组件名' from '设置全局组件的路径位置';
Vue.component("全局组件新名字", '导入之后要设置的组件名')
props自定义属性
在使用者自己封装组件之后,并且设置了全局组件,如果多个组件(不能自己调用自己的组件)都是用封装组件的属性,但是属性的值都是在封装组件里面设置好的,使用后的属性都是一样的,但使用者的组件需要自己设置属性。则就需要在封装的组件中设置props。
注意props自定义属性是只读的,不能修改props的值,否则会报错
封装的组件,导出的组件名为Myweb:
<template>
<div id="app">
<p>{{num}}</p>
//下面的点击事件中如果只有一条语句,直接可以写在行内里面
<button @click="index +=1">点击</button>
</div>
</template>
<script>
export default {
props:['num'],
data() {
return {
index :0
}
},
}
</script>
使用者使用封装的组件:
<template>
<div id="app">
<Myweb num="9"></Myweb>
</div>
</template>
如果props只能读取,不能修改则毫无意义,所以将props设置成可以修改的值。
<template>
<div id="app">
<p>{{index}}</p>
<button @click="index +=1">点击+1</button>
</div>
</template>
<script>
export default {
props:['num'],
data() {
return {
index:this.num
}
},
}
</script>
使用者使用封装的组件
<template>
<div id="app">
//可以在num前面v-bind必须加上
<Myweb :num="6"></Myweb>
</div>
</template>
如果使用者在自定义属性时,直接调用这个封装的组件,没有给定自定义属性的值,最终会显示undefined。可以对自定义属性设置一个默认值,直接将props改写成对象。
<script>
export default {
props:{
// 自定义属性名:{配置选项}
num:{
//如果用户没有指定属性的值,会默认将自定义属性值设置为2
default: 2,
//现在的num值必须时数字型
type:Number,
//必填项,使用者必须给num转递值,否则会报错
required:true
}
},
data() {
return {
index:this.num
}
},
}
</script>