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

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的属性值只能初始化和读取，不可修改