主页 / 问题 / 1215261
Accepted
Федотов
Asked:2021-12-07 17:44:58 +0800 CST2021-12-07 17:44:58 +0800 CST

将值传递给父组件

  • 772

告诉我如何在我调用的子组件中传递上面的值this.$emit('get-method', this.users)

并在父母以某种方式得到<add-new-base-component @get-method="newMethod" ref="showmodal"></add-new-base-component>

我需要newMethod得到this.users

javascript

1 个回答

  1. Best Answer

    根据文档 - 将数据与事件一起传递：您可以将某些数据与事件一起发送。例如，如果我们希望子组件向父组件发送数据，我们可以使用第二个参数$emit来提供这个值：

    this.$emit('get-method', this.users)

    如果事件处理程序是一个方法（比方说）：

    ... @get-method="newMethod" ...

    ，则该值将作为第一个参数传递：

    newMethod(users) {
 this.users = users
},

    这是一个完整的例子：

    Vue.component('child',{
  data(){
    return {
      users: ['Viktor','Ruslan', 'Alex']
    }
  },
  methods: {
    getUsers() {
      this.$emit('get-method', this.users)
    }
  },
  template: `
  <fieldset>
   <legend>Дочерний компонент</legend>
    users = {{ users }}
    <button @click="getUsers">Отправить users родителю</button>
  </fieldset>
  `
})
Vue.component('parent',{
  data(){
    return {
      users: []
    }
  },
  methods: {
    newMethod(users) {
      this.users = users
    },
  },
  template: `
  <fieldset>
   <legend>Родительский компонент</legend>
    users = {{ users }}
    <child @get-method="newMethod" ref="showmodal"></child>
  </fieldset>
  `
})


new Vue({
  el: '#app'
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <parent></parent>
</div>

    • 4

相关问题