vue.js之子组件向父组件传值（参）

props用于父组件向子组件传递数据，子组件向父组件传值则是使用自定义事件来完成。

	自定义事件的流程：
			1.在子组件中，通过$emit()来触发事件。
			2.在父组件中，通过v-on来监听子组件定义的事件。

示例：

<!--父组件-->
  <div id="app">
  	<!--监听子组件定义的事件，获取传过的参数，这里的事件忽略括号-->
    <cpn @item-click="getChildParams"></cpn>
  </div>

  <!--子组件-->
  <template id="childTemp">
    <div>
      <ul>
      <!--子组件渲染数据-->
        <li v-for="item in categories">
          <button @click="childClick(item)">{{item.name}}</button>
        </li>
      </ul>
    </div>
  </template>
  <script>
    // 子组件
    const cpn = {
	    template: '#childTemp',
      data() {
    	return {
    		categories: [
	            {id: 'aaa',
	              name: '热门推荐'
	            },
			    {id: 'bbb',
				    name: '手机数码'
			    },
			    {id: 'ccc',
				    name: '家用家电'
			    },
			    {id: 'ddd',
				    name: '电脑办公'
			    }
          ]
        }
      },
      methods: {
      	//子组件点击传参，使用$emit(func,param)，触发func事件
	      childClick(v) {
		      this.$emit('item-click',v);
	      }
      }
    }

  	const app = new Vue({
  		el: '#app',
  		data: {
 			msg: '欢迎使用Vue.js',
 			text: '渐进式框架vue',
 			moveList: [
 				'阿甘正传',
 				'英伦对决',
 				'钢铁侠'
 			],
 			count: 0
 		},
	    components: {
		    cpn
	    },
 		methods: {
 		<!--监听子组件定义的事件，获取传来的参数，参数写在括号里-->
		  getChildParams(item) {
			  console.log(item);
		  }
 		}
  	})
  </script>