Vue的父子组件数据传递

由父组件向子组件传递数据：

比如app向Vfooter组件传递数据：得现在父组件的APP中给子组件显示部分绑定自定义属性 数据可以是列表 数字 对象……

songList是父组件里定义过的列表数据

    data(){
      return{
        msg:'vue',
        songList:[
          {song:"星月神话",author:"金莎"},
          {song:"红颜旧",author:"刘涛"},
          {song:"九张机",author:"叶清炫"}
        ],
        imgIndex:0,
      }
    },

<Vfooter v-bind:song="songList"></Vfooter>

此时去子类组件Vfooter组件中检查数据类型，需要应用props方法

props:{
      song:Array
    },

当验证通过，数据类型与期望类型一致后，可以通过v-for去对数据操作……

<footer class="footer">
   <h3>我是页尾 关于我们</h3>
    <ul>
      <li v-for="item in song">
        {{item.author}}
      </li>
    </ul>
  </footer>

*********************************************************************************************

子组件向父组件传递数据：

例如 Vcontent给APP里面传：

先在子组件绑定一个响应事件

<template>
  <div class="content">
    <h2>中心区域</h2>
    <button @click="addSong">添加歌手</button>
  </div>
</template>

这次点击会触发当前组件下的addSong方法，而在此方法里需要让其找到对应的自定义父组件响应

此时用到this.$emit(父组件待响应事件，待传递数据) 

  methods:{
      addSong(){
          this.$emit("addAuth",{song:"天下",author:"张杰"});
      }
    },

父组件此时的addAuth方法会执行对应的方法 对应的方法接收数据参数可以省略，但到下面执行方法时必须有形参

<Vcontent v-on:addAuth="addStar"></Vcontent>

方法执行，接收数据，并执行相应操作

methods:{
        addStar(s){
            //alert(s);
            this.songList.push(s)
        },
    }
}

S为实际接收到的数据，此处不可直接写str表示，会异常