vue 私有,全局组件,props自定义属性

组件的使用

设置私有组件
根组件使用子组件的方式。

  1. 在跟组件中使用 import 导入之后定义的名字 from ‘组件的位置’
  2. 在跟组件中使用components注册私有组件
export default {
     compoments:{
         //导入组件之后的名字
    }
}
  1. 最终将注册的组件以标签的形式写入

设置全局组件

  1. 首先在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>
相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

深浅Java

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值