vue 父向子組件傳遞數據，子組件向父組件傳遞數據方式

父組件向子組件傳遞數據通過props,子組件引入到父組件中，設置一個值等於父組件的數據，通過:bind將數據傳到子組件中，子組件中通過props接收父組件的數據，這樣就可以使用父組件的數據了，循環組件中的對象或數組，:key="item.index",這樣是防止報警告；

子組件通過發射事件$emit();發射事件，父組件監聽子組件發射的事件，通過事件監聽，定義方法接受子組件傳遞的相關數據，子組件在發射事件的時候可以傳遞相關的數據，父組件監聽的函數可以接收數據；

父組件向子組件傳值，是通過屬性的方式傳值，vue單向數據流，子組件使用父組件的數據，但是不能修改父組件傳個子組件的內容，否則會影響其他子組件對父組件的數據引用，因此vue是單向數據流是這么考慮的

父組件代碼如下：

<template>
  <div id="app">
    <input type="text" v-model="inputValue" />
    <button   @click="handleBtn">提交</button >
    <Hello :content="item" :index="index" :key="item.index" v-for="(item ,index) in list"
//監聽子組件發射的delete事件，並且綁定handleDelete方法

           @delete="handleDelete"></Hello>

    <router-view/>
  </div>
</template>

<script>
//子組件引入
 import Hello from './components/HelloWorld'

export default {
  name: 'App',
  components:{
    Hello
  },
  data(){
    return {
      list:[],
      inputValue:'',

    }
  },
  methods:{
    handleBtn(){
      this.list.push(this.inputValue);
      this.inputValue = '';
    },
//接收子組件傳遞的數據
    handleDelete(index){

 this.list.splice(index,1)
    }
  }
}
</script>
子組件代碼

<template>
  <div class="hello">

    <ul>
      <li @click="handleClick"

          >{{content}}</li>
      <li></li>
    </ul>
  </div>
</template>

<script>
export default {
  props:['content','index'],
  data () {

    return {
    }
  },
  methods:{
    handleClick(){
//發射事件delete,發射props中的index（這里是list的數組索引）
      this.$emit('delete',this.index);
}
  }
}

</script>