Vue.component(‘组件名称’,{})中的属性
1.template
作用:用来定义组件的html模板
使用:直接接字符串
Vue.component('组件名称',
{
template:'<p>aaa</p>'
})
2.data
作用:
定义一个在组件中使用的数据
定义:
Vue.component('组件名称',
{
data:fuction(){
return(
msg:'aa'
//每个组件使用的数据都是独立的
//每个数据都是新创建的
//就算用的是同一个组件模板
//var a=0
//而直接return a
//则会多个页面上的组件同时使用同一个数据源
)
}
})
使用:
使用插值表达式{{msg}}
3.methods
作用:
定义一个在组件中使用的方法
定义:
Vue.component('组件名称',
{
methods:{
方法名(){}
}
})
4.props
作用:
将父组件的数据传递到子组件
定义:
Vue.component('组件名称',
{
props:['对接父组件数据的名称'],
})
与data中的区别:
props是从父组件传递过来的,只能读取,不能修改父组件中的值
data是子组件私有的,可读可写