自定义事件实现子组件给父组件传值 |

自定义事件实现子组件给父组件传值

注意：vue 官方推荐你始终使用 kebab-case 的事件名。

1. 子组件 DatePicker.vue

<script>
  export default {
    // 建议定义所有发出的事件，以便更好地记录组件应该如何工作：
    emits: ['run-parent'],
    data() {
      return {}
    },
    methods: {
      run() {
        this.$emit("run-parent", "这是子组件穿过来的值")
      }
    }
  }
</script>

<template>
  <button @click="run">通过广播方式实现子组件给父组件传值</button>
</template>

2. 父组件 Home.vue

<script>
  import DatePicker from './DatePicker.vue'
  export default {
    data() {
      return {
        title: "你好vue"
      }
    },
    components: {
      'v-datePicker': DatePicker
    },
    methods: {
      getChild(data) {
        alert(data)
      }
    }
  }
</script>

<template>
  <div>
    <v-datePicker @run-parent="getChild" />
  </div>
</template>

自定义事件验证

1. 子组件

<script>
  export default {
    // 建议定义所有发出的事件，以便更好地记录组件应该如何工作。
    emits: {
      submit: ({ username, password }) => {
        if (username && password) {
          return true
        } else {
          console.warn('传入的参数不能为空!')
          return false
        }
      }
    },
    data() {
      return {
        username: "张三",
        password: ""
      }
    },
    methods: {
      run() {
        this.$emit("submit", {
          username: this.username,
          password: this.password
        })
      }
    }
  }
</script>

<template>
  <input type="text" v-model="username" />
  <br>
  <br>
  <input type="text" v-model="password" />
  <br>
  <br>
  <button @click="run">通过广播方式实现子组件给父组件传值</button>
</template>

2. 父组件

<script>
  import Login from './Login.vue'
  export default {
    data() {
      return {
        title: "你好vue"
      }
    },
    components: {
      'v-login': Login
    },
    methods: {
      getChild(data) {
        alert(data.username + ' ' + data.password)
      }
    }
  }
</script>

<template>
  <div>
    <v-login @submit="getChild" />
  </div>
</template>

使用第三方插件 mitt 实现非父子组件传值

https://github.com/developit/mitt

vue 自 3.x 以后从实例中移除了 $on ，$off 和 $once 方法，$emit 仍然是现有 API 的一部分，但只能实现子组件触发父组件的方法。

1. 使用 mitt 之前先安装 mitt 模块

npm install --save mitt

2. 新建 src/model/event.js

import mitt from 'mitt'
const VueEvent = mitt()

export default VueEvent

3. Header 组件

<script>
  import VueEvent from '../model/event'
  export default {
    data() {
      return {}
    },
    methods: {
      doLogin() {
        VueEvent.emit("login");
      }
    }
  }
</script>

<template>
  <div>
    <button @click="doLogin">非父子组件传值</button>
  </div>
</template>

4. Login 组件

<script>
  import VueEvent from '../model/event'
  export default {
    mounted() {
      VueEvent.on("login", () => {
        alert("doLogin")
      })
    }
  }
</script>

<template>
  我是用户登录组件
</template>