vue 父子组件传值

在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

父组件

<template>
  <div>
    <div>
      <input v-model="inputValue" />
      <button @click="handleSubmit">提交</button> 
    </div>
    <ul>
      <helloworld
       v-for="(item,index) of list"
        //子组件中可以使用父组件中的数据
       :content="item"
       //content 为父组件向子组件中的传参     此时本代码块为子组件      在父组件中的引用   
       //在子组件中会引用content，index 传参     并用props经行管理
       :key="index"
       :index="index"
       @delete="handleDelete"
       //父组件中的@delete监听函数，来源于子组件，并监听定义在父组件中的
       //handleDelete函数
       
        ></helloworld>
    </ul>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'

**//在父组件(App.vue)中引入子组件(HelloWorld.vue)**

export default {
  components: {
    'helloworld':HelloWorld
  },
  data () {
    return {
      inputValue: '',
      list:[]
    }
  },
  methods: {
    handleSubmit () {
      this.list.push(this.inputValue)
      this.inputValue = ''
    },
    handleDelete (index) {
      this.list.splice(index,1)   
      //处罚handleDelete函数后，对父组件中的数据经行操作
    },
  }
}
</script>
<style>
</style>

子组件

<template>
  <li @click="handleDelete">{{content}}</li>
  //设置监听函数handleDelete
</template>

<script>
export default {
  props: ['content','index'],
  //管理父组件中传来的传参['content','index']
  methods: {
    handleDelete () {
      this.$emit("delete",this.index)
      //触发handleDelete====》为$emit触发关键字   
      //   delete 为父组件中的监听事件    this.index为触发事件中传递的参数 父组//件中@delete的监听函数 接受 此传参
    }
  } 
}
</script>
<style scoped>
</style>