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>

你可能感兴趣的:(vue.js,javascript)