Vue-cli-组件

组件在工程中的使用

一、组件的基本骨架
<template>
<div>
  <h3>组件在vue-cli中的基本使用</h3>
  <p>组件中的数据---{{msg}}</p>
  <button @click="info()">触发组件中的方法</button>
</div>
</template>

<script>
export default {
data(){
    return{
        msg:123
    }
},
methods:{
    info(){
        alert("我是组件中的方法")
    }
}

}
</script>

<style>

</style>
二、使用组件的三个步骤

1、创建组件,后缀名为vue

image-20211105135704726

2、在App.vue中导入组件

import Count from "@/components/Count.vue"
//在这里Count为自定义的名称,建议开头大写

3、挂载并在页面中使用组件

export default {
  name: 'App',
  components:{
    Count
  }
}
<Count></Count>
三、注册全局组件

1、古老的方式:在main.js中配置全局组件

//导入需要全局注册的组件
import Com from "@/components/Com.vue"
//将组件注册为全局组件
Vue.component("Com", Com)

2、最新的方式(待补充)

四、组件中的属性props

1、props属性值的两种定义方式

//方式一
props:["name",'age']

//方式二
props:{name:'daidai',age:'21'}

2、给props属性设置一些详细的配置

props:{
    name:"",
    //设置单个属性
    age:Number,
    //设置多个属性
    sex:[String,Number],
    //设置属性必填
    account:{
        type:String,
        required:true
    },
    //设置属性的默认值
    password:{
        default:123456
    },
    //带有默认值的对象
message:{
    default:function(){
        return{
        msg:"hello"
        }
    },
//     //自定义验证函数: 数据只能是下面中的一个
//      propF: {
//   type: String,
//   validator: function (t) {
//     // 这个值必须匹配下列字符串中的一个
//     return t === 'fade' || t === 'slide'
//   },
//   defalut:'slide'
// }
}

三、在组件中直接调用props中的属性

<p>组件中默认的props.name----{{name}}</p>
<p>组件中默认的props.age----{{age}}</p>
<p>组件中默认的props.sex----{{sex}}</p>
<p>组件中默认的props.account----{{account}}</p>
<p>组件中默认的props.message----{{message.msg}}</p>

四、在页面中给props的属性赋值

<p>
这里有个小细节:
</p>
<p>
  使用v-bind绑定的时候,如果加:则绑定的是一个js表达式,会检索js文件中的变量和方法
</p>
<p>
  如果不加:,则绑定的是一个普通的字符串
</p>
<Count name = "daidai" :age="21" sex="" account="789456" propF="fade"></Count>

五、小细节:props的属性值只能初始化和读取,不可修改

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值