Vue组件及上下级传值

Vue的data属性必须是个函数，否则当你复用组件时，组件之间是互相影响的，下面使用的是全局注册的方式

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
------------------------------------------------------------
//组件的使用
<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

Props

当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性。

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})
------------------------------
//传值方式
//静态传值
<blog-post title="My journey with Vue"></blog-post>
//动态传值
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>

单个根元素的特性

看名字可能不太好理解，通俗的说就是，vue组件的template属性中你只能写一个根标签，不能像下边一样：

//俩个并列的标签
<h3>{{ title }}</h3>
<div v-html="content"></div>

监听子组件事件

通俗的就是说，我的组件代码发生了一些操作，我想让我的外层做出响应。
俩步操作：
1.在组件中的按钮上定义一个，v-on自定义事件
2.在外层定义一个v-on捕捉，从而操作

	<div id="blog-posts-events-demo">
		  <div :style="{ fontSize: postFontSize + 'em' }">
		    <blog-post 
		      v-for="post in posts"
		      v-bind:key="post.id"
		      v-bind:post="post"
		      //父捕捉
			  v-on:enlarge-text="postFontSize += 0.1"
		    ></blog-post>
		  </div>
		</div>
		<script>
				Vue.component('blog-post',{
				 props: ['post'],
				  template: `
				    <div class="blog-post">
				      <h3>{{ post.title }}</h3>
				      //自定义
				      <button v-on:click="$emit('enlarge-text')">
				        Enlarge text
				      </button>
				      <div v-html="post.content"></div>
				    </div>
				  `
			})
			new Vue({
			  el: '#blog-posts-events-demo',
			  data: {
			    posts: [  { id: 1, title: 'My journey with Vue' },
							{ id: 2, title: 'Blogging with Vue' },
							{ id: 3, title: 'Why Vue is so fun' }],
			    postFontSize: 1
			  }
			})
		</script>

Note：要注意$emit只是用来触发一个自定义的事件，这个事件对应外部父组件调用子组件时，对子组件添加的v-on所监听的事件，$emit并不能触发任何函数操作，仅仅如同一个触发器。

使用事件抛出一个值

就是指，组件向外部抛出一个值

//可以看到第二个参数就是它抛出来的值
<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
-----------------------------
<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>
//如果这个抛出处理事件是个函数，那么抛出值会做为第一个参数传入（可以传多个参数已测试）
----------------------------------------
<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>