一.组件命名规范
1.PascalCase 与 kebab-case?
PascalCase(帕斯卡命名法)即为驼峰式命名,具体可以分为大驼峰(如LastName),和小驼峰(lastName),是现在较为流行的变量命名方式,
kebab-case(短横线命名),即last-name这种命名方式,每个大写字母前都加上横杠并且全改为小写形式。
2.vue中组件命名需要注意的地方
在vue中使用驼峰式命名的组件在使用时必须使用kebab-case形式,否则会定义该标签名未定义,例如你在注册了一个组件名为myVue,那么在标签中应使用<my-vue></my-vue>
.
例如:
<div id="app">
<my-vue></my-vue>
</div>
<script>
new Vue({
//绑定元素
el:'#app',
//局部注册组件
components:{
'myVue':{
template:"<span>this is myvue</span>",
}
},
})
</script>
如上,是一个正确的使用方式,如果组件名首字符大写,在使用时也应该使用小写形式,如MyVue,等同与myVue,使用时都是my-vue.
二、父子组件之间的传递
1.老爸跟儿子说话(父组件传递给子组件)
实际上是利用了vue的props属性,老爸将要说的话放在引用的组件标签里面,例如<my-vue title="mclink"></my-vue>
,儿子可以选择听或者不听,如果要听的话就添加props属性,将其键名title放进去即可,例如props:[‘title’],在子组件中可以使用this.title(js用)或者差值表达式{{title}}获取值(HTML用).如果不听的话(没添加props属性)使用就会报未定义。
扔代码吧!
父组件:
<template>
<div id="app">
<!-- <HelloWorld/> -->
<!--添加title属性,并赋值mclink-->
<hello-world msg = "爸爸收到了"></hello-world>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
},
methods:{
}
}
</script>
<style scope>
</style>
子组件:
<template>
<div>
<h1 @click='clickme'>{{title}}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
title:'点我给儿子发信息'
}
},
props:['msg'],
methods:{
'clickme':function(){
this.title = this.msg
}
}
}
</script>
<style scoped>
</style>
2.儿子跟老爸说话(自定义事件)
这里举一个比较简单的栗子:在父组件中让自定义标签监听一个事件,这个事件绑定一个方法,然后在子组件中主动触发该事件。放下简单的代码吧!
父组件:
<template>
<div id="app">
<!-- <HelloWorld/> -->
<!--这里用v-on监听了一个sendtofather事件,该事件绑定了say方法-->
<hello-world title = "mclink" v-on:sendtofather='say'></hello-world>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
},
methods:{
//触发say,弹出子组件所传参数
'say':function(msg){
alert(msg)
}
}
}
</script>
<style scope>
</style>
子组件写法:
<template>
<div>
<h1>{{ msg }}</h1>
<h1 @click='clickme'>{{title}}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
props:['title'],
methods:{
'clickme':function(){
//自动触发sendtofather事件
this.$emit('sendtofather','are you ok?')
}
}
}
</script>
<style scoped>
</style>