vue父子组件传值

一、子组件传值到父组件$emit

1、子组件传入：

<template> 
    <div class="testCom">
        <input type="text" v-model="message" />
        <button @click="click">发送消息给爸爸</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
           //this.$emit('事件名称','传递的数据')当子组件的数值发生变化时，向外发射一个事件
        }
    }    
}
</script>

2、父组件接收

<template>
    <div>
      <child @childFn="parentFn"></child>
//<child v-on:事件名称="函数名"></child>
    </div>
</template>

<script>
import child from '../components/child.vue' // 引入子组件
export default {
    data: {
        message: " "
    },
    methods: {
       parentFn(childData) {
        this.message = childData;
      }
    }
}
</script>

二、父组件传值到子组件 props
1、父组件传入

<template>
    <child :list='List'></child> 
   <child list='List'></child> //注意:加了冒号表示将data的值传入子组件，不加冒号只是传入一个字符串给子组件
    // 子组件通过 props 接收传递过去的 list和值
</template>
<script>
import child from '../components/child.vue' // 引入子组件
export default {
  data () {
    return {
      List：[ 
            {name: '张三', id: 1},//向子组件传值
            {name: '王二', id: 2},
            {name: '李四', id: 3}
        ]
    }
  },
  components: {
    Child 
  }
}
</script>

2、子组件接收

<template>
    <ul>
        <li v-for="item in list" :key="item.id">
            <p><span>{{item.id}} : </span>{{item.name}}</p>
        </li>
    </ul>
</template>
<script>
export default {
    props:['list']//接受父组件的传值
    //如果传入的值比较多，也可以将props设置成一个对象，再定义传入的值类型
  props:{
     list: {
        type: [String,  Array],
        default: '',
      },
    },
}
</script>