vue2 最新 父子传参 效率最高的目前是怎么传

在Vue2中，父子组件通信的方式有多种，其中效率最高的方式是使用 `v-bind` 和 `$emit` 进行单向数据流传递。

具体实现方式如下：

1. 在父组件中使用 `v-bind` 绑定需要传递的数据到子组件的属性上，例如：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        parentMessage: 'Hello from parent'
      }
    }
  }
</script>

2. 在子组件中使用 `props` 接收父组件传递过来的数据，例如：

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

3. 如果需要在子组件中修改这个数据并将更改传递回父组件，可以使用 `$emit` 触发自定义事件，并将需要传递的数据作为参数传递，例如：

<template>
  <div>
    <input type="text" v-model="localMessage">
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        localMessage: ''
      }
    },
    methods: {
      sendMessage() {
        this.$emit('message-from-child', this.localMessage)
      }
    }
  }
</script>

4. 在父组件中监听子组件触发的自定义事件，并在事件处理函数中处理子组件传递过来的数据，例如：

<template>
  <div>
    <child-component :message="parentMessage" @message-from-child="handleMessageFromChild"></child-component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        parentMessage: 'Hello from parent'
      }
    },
    methods: {
      handleMessageFromChild(message) {
        console.log(message)
      }
    }
  }
</script>

使用 `v-bind` 和 `$emit` 进行单向数据流传递能够保证父子组件之间的数据传递是高效的，并且能够使得应用的状态更加可控。