Vue中父传子与子传父的详细教程

 父传子（子组件使用父组件内的值）

 

 <div id="app">
    <jpp :meihua="arr"></jpp>
  </div>
  <template id="api">
    <div>
      <ul>
        <li v-for="item in meihua" @click="btnclick(item)">{{item.name}}</li>
      </ul>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const ls ={
      template:"#api",
      props:["meihua"],
      methods: {
        btnclick(item){
          console.log(item.age)
        }
      },
    }
    const app = new Vue({
      el:"#app",
      data:{
        arr:[{
          name:"红桃A",
          age:18
        },{
          name:"黑桃A",
          age:18
        }]
      },
      components:{
        jpp:ls
      }
    })
  </script>

子传父 （父组件使用子组件内的值）

 

<div id="ap">
  <api @aaa="bbb"></api>
</div>
<template id="api">
  <div>
    <ul>
      <li v-for="item in arr" @click="btnclick(item)">{{item.name}}</li>
    </ul>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const ls = {
    template:"#api",
    data() {
      return {
        arr:[{
          name:"红桃A",
          age:18
        },{
          name:"黑桃A",
          age:18
        }]
      }
    },
    methods: {
      btnclick(item){
        this.$emit("aaa",item.age)
      }
    }
  }
  const ap = new Vue({
    el:"#ap",
    components:{
      api:ls
    },
    methods: {
      bbb(item){
        console.log(item)
      }
    }
  })
</script>