组件在工程中的使用
一、组件的基本骨架
<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的属性值只能初始化和读取,不可修改