开始 Vue 之旅--开发项目（二）子组件与父组件的事

        上篇讲得是简单案例开发（开始 Vue 之旅--开发项目（一）），但是我们都知道项目不可能那么简单，会越来越复杂的，这时候我们就要合理的分配，使其项目更加简单明了。

一.组件的分配

重要是这俩种划分，但是不管这么划分其做法是一样的。下面我们以页面区域划分来做介绍

二.页面区域划分---创建新项目

（一）知识点及步骤

app.vue是入口文件  components注册组件

props 组件之间的通讯

①在组件的components文件里，创建新的页面gfooter.vue/gheader.vue

       A.这个文件系统默认标签，这会使组件冲突，vue不知道这是默认标签还是组件，所以不会渲染
       B.命名尽量不要用“ - ”，否则也会出现错误
      尽量在前面加上前缀，比如gfooter.vue (g表示组group）

②在入口文件app.vue模板中引入组件

       要在<div id="app"></div>中插入

     <gheader></gheader>  

    <gfooter></gfooter>

<template>  <div id="app">    <gheader></gheader>    <div class="cnt">      中间内容    </div>    <gfooter></gfooter>  </div></template>

    此时调试出出现如下错误，说明这俩个组件还没有注册

③在<script>里面注册组件

import gheader  from './components/gheader.vue' 
import gfooter  from './components/gfooter.vue'  

new Vue({
     components:{gheader,gfooter},
})

注意：

（1）.import  变量(在app中调用的)   form  目录下的文件(可以用gheader.vue或是gheader)

  (2). components与data,watch等并列

⑤渲染成功后，就会显示gheader.vue和gfooter.vue页面的内容

(二).事列

在之前的列子中操作

（1）.gheader.vue

<template>  <div class="header">    <h1>{{msg}}</h1>  </div></template><script>export default {  name: 'header',  data () {    return {      msg: '欢迎 来 vue 页面!'    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 {  font-weight: normal;}.header h1{  background:#f00;  color:#fff;  text-align:center;  width:100%;}</style>

  

  (2).gfooter.vue

<template>  <div class="footer">    <p>{{msg}}</p>  </div></template><script>export default {  name: 'footer',  data () {    return {      msg: '底部!'    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.footer p{  background:#ccc;  line-height:35px;  font-size:1.2rem;  color:#f00;}</style>

  (3).app.vue

<template>  <div id="app">    <gheader></gheader>    <div class="index-cnt">      <h1 v-text="title"></h1>      <input v-model="newItem" v-on:keyup.enter="addNew"/>      <ul class="itemslist" >        <li v-for="(item,index) in items" v-bind:class="{active:index == num}"         v-on:click="itemactive(index)">{{item.label}}</li>      </ul>    </div>    <gfooter></gfooter>  </div></template><script>  import gheader  from './components/gheader.vue' import gfooter  from './components/gfooter.vue'  //引入store.jsimport Store from './store.js'export default {  name: 'app',  data: function () {    return {       title: '水果的种类很多，让我们一起添加：',      items:Store.fetch(),      num:0,      newItem:''    }   },  components:{gheader,gfooter},  //watch对象监听的方法  watch:{    items: {          handler: function (items) {          Store.save(items);        },          deep: true      }    },  methods:{    //添加颜色    itemactive:function(index) {      this.num = index;    },    addNew:function(){      //因为列表是数组所以push()      this.items.push({        label:this.newItem      })      this.newItem=" ";//当enter完后，input的值自动消失(双向绑定的原因)    }    }}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}.itemslist{  text-align:left;  line-height:30px;}.active{  color:#f00;}</style>

（4）.最终效果

（三）.参数传递

       prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态

（1）.父组件(app.vue)传参数给子组件(gfooter.vue)

   ①只要在父组件

        <gfooter fathercnt='hello! 这是父级传给子组件的内容'></gfooter>

     fathercnt这个变量可以自行定义 

  ②在子组件中

        在<script>中传递参数

                props: ['fathercnt']

         在<template>模板中，引入

<p>{{fathercnt}}</p>

      注意：props是数组，同时与与data,watch等并列

   

   
 (2).子组件(gfooter.vue)传参数给父组件(app.vue)

   子组件要把数据传递父组件，就得用自定义事件:

使用v-on绑定自定义事情
a.使用 $on(eventName) 监听事件
b.使用 $emit(eventName) 触发事件

注意：不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定

       ①在app.vue模板中用v-on 绑定

  在<template>模板中：  

<p>子组件传递过来的参数：{{childwords}}</p>

       <gfooter  v-on:child-tell-me ="listenToMyBoy"></gfooter> 

注意：这个child-tell-me可以自定义

    在<script> 中：

     methods:{
          listenToMyBoy:function(msg){
                 this.childwords = msg;
          }  
      }

②子组件gfooter.vue要触发事件

  在<template>模板中：<button v-on:click="onClick">子组件传值给父组件</button>

  在<script> 中：

     methods:{
           onClick:function(){
             this.$emit('child-tell-me',this.msg)
           }
     }

代码：简单vue2开发