Vue 父子/子父传参

1.父子传参

//父组件
<template>
  <div>
    <!-- 引入子组件 -->
    <Test :name='data'/>
  </div>
</template>
<script>
  import Test from "./test.vue"
  export default {
    data() {
      return {
        data: [1,2,3,4,5]
      }
    },
  }
</script>

//子组件
<template>
  <div>
    <div>父子传参</div>
    <button v-for="(item,index) in name" :key="index">{{item}}</button>
  </div>
</template>
<script>
  export default {
    // 接受父组件传递的参数
    props:{name:{type:Array}},
  }
</script>

2.子父传参

// 父组件
<template>
  <div>
    <!-- 引入子组件 -->
    <Testcom @zdy_show="showdata"/>
  </div>
</template>
<script>
  export default {
    methods: {
      showdata(msg) {
        console.log(msg)
      }
    },
  }
</script>
// 子组件
<template>
  <div>
    <button @click="$emit('zdy_show',data)">子父传参</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        data: [
          {name:'我是一只小鱼',age:22},
          {name:'我是二只小鱼',age:23},
          {name:'我是三只小鱼',age:24},
        ]
      }
    },
    mounted () {
      this.getFather()
    },
    methods:{
      getFather(){
        this.$emit('zdy_show',this.data)
      }
    }
  }
</script>