Vue之父子组件传参

父组件给子组件传参的时候我们先把子组件组册到父组件里面 如下

<template>
  <div>

    <zi :data="name" :BookProp="books" ></zi>        //这个：号后面的名字就是到子组件里面的名字

  </div>
</template>

<script>
  //导入子组件
  import zi from './zi.vue'
  export default {
    data(){
      return{
          name:'',
          books:[
            {
              'name':'你好牛逼啊'
            },
            {
              'name':'就是你打个电话'
            },
            {
              'name':'真是垃圾啊'
            }
          ]
      }
    },
    components:{
      //注册子组件
      zi:zi
    },
}

子组件获取数据

<template>
  <div><ul>
        <li v-for="k in BookProp" @click="testProp">{{k.name}}</li>   //获取到数据接着遍历出来
      </ul>

  </div>
</template>

<script>
  export default {
    props:["BookProp","data"],    //获取父组件传来的数据
  }

子组件给父组件传参  这里我们主要是用的是 $emit（子组件）

<template>
    <div>
        <input @click="setNum" type="button" value="给父组件传递值">
        <li>
            <ul v-for="i in num" :key="i.name">{{i.name}}

            </ul>
        </li>
    </div>
</template>

<script>
export default {
    name:"zizujian",
    props:["data"],
    data() {
        return {
            num : [{"name":"uzi"},{"name":"ming"},{"name":"xiaohu"},]
        }
    },
    methods: {
        setNum(){
            this.$emit('func',this.num)      //这里写的名字，一会就是父组件里面前面的那个名字（重点）
        },
　　}
}

父组件

<template>
    <div>

        <p @click="getFunc">peter的测试父组件</p>


        <zizujian @func="getNum"  ></zizujian>       //这个func 就是刚刚子组件里面写的那个参数


    </div>
</template>


<script>

import zizujian from './zizujian'
export default {
  
    data() {
        return {
            data:[]
        }
    },
    components:{
        zizujian

    },
    methods:{

        getNum(val){
            this.data=val       //获取参数
            console.log(val)    //讲数据打印出来
        }

    },

}