vue 父子组件传值问题

父组件向子组件传值成功

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

子组件向父组件传值成功

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

• 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

 父组件：

<template>
  <div>
    传值组件
    <value-com :message="info" :message1="info1" @valueCz = 'valueParent'></value-com>
    <p>{{childInfo}}</p>
  </div>
</template>

<script>
import valueCom from './valueCom'
export default {
  name: 'valueOf',
  components: {
    valueCom
  },
  data () {
    return {
      info: '我是父组件的值',
      info1: [
        {name: 'lili', id: 0},
        {name: 'zhenzhen', id: 1},
        {name: 'sunsun', id: 2},
        {name: 'aiai', id: 3}
      ],
      childInfo: ''
    }
  },
  methods: {
    valueParent: function (data) {
      this.childInfo = data
    }
  }
}
</script>

子组件：

<template>
    <div class="valueCom">
      我是子组件
      <div>{{message}}</div>
      <ul>
        <li v-for="item in message1" :key="item.id">{{item.name}}</li>
      </ul>
      <button @click='valueParent'>点击子组件传递给父组件</button>
    </div>
</template>

<script>
export default {
  name: 'valueCom',
  props: [
    'message',
    'message1'
  ],
  data () {
    return {
      childInfo: '我是子组件传过来的'
    }
  },
  methods: {
    valueParent () {
      this.$emit('valueCz', this.childInfo)
    }
  }

}
</script>

<style scoped>
li{
  list-style:none;
}