vue组件的通信机制

一.组件命名规范

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>