在 Vuejs 中将数据从子级传递给父级（有这么复杂吗？）

Question

感谢您阅读我的问题。

我已经阅读了：

vuejs update parent data from child component

https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2

概念是一样的，我需要将一个数据对象从孩子传递给父母。我使用$emit 将数据传递给父组件，但它不起作用。你知道出了什么问题吗？你可以在这里查看我的代码：

Vue.component('list-products', {
  delimiters: ['[[', ']]'],
  template: '#list-products-template',
  props: ['products'],
  data: function () {
    return {
      productSelected: {}
    }
  },
  methods: {
    showDetailModal: function (product) {
        console.log('click product in child, how can i pass this product to productSelected data in parent?');
      console.log(product);
      this.productSelected = product;
      this.$emit('clickedShowDetailModal', product);
    }
  }
});


var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#resultComponent',
  data: {
    listProducts: [
        {'name':'test1',id:1},
        {'name':'test2',id:2},
        {'name':'test3',id:3}
    ],
    productSelected: {}
  },
  methods: {
    clickedShowDetailModal: function (value) {
      console.log('value');
      console.log(value);
      this.productSelected = value;
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="resultComponent" data-toggler=".small-up-2" class="row small-up-1">
  <list-products :products="listProducts"></list-products>
</div>

<script type="text/x-template" id="list-products-template">
  <div>
    <div class="column column-block" v-for="(product, index) in products" :product="product" :index="index" :key="product.id">
    <li class="more-benefits">
        <a @click="showDetailModal(product)">Click me [[ product.name ]] and check console.log »</a>
    </li>
    </div>
  </div>
</script>

提前致谢。

Answer 1

道具适用于parent -> child

您可以将$emit 用于child -> parent

v-on 指令捕获由$emit 发出的子组件事件

子组件触发点击事件：

export default {
   methods: {
     onClickButton (event) {
         this.$emit('clicked', 'someValue')
     }
   }
}

---

父组件接收点击事件：

<div>
    <child @clicked="onClickChild"></child>
</div>

...

export default {
  methods: {
      onClickChild (value) {
          console.log(value) // someValue
      }
  }
}

Answer 2

您没有在收听活动。我将活动名称更改为clicked-show-detail。试试这个。

在组件的showDetailModal 方法中。

this.$emit('clicked-show-detail', product);

在你的 Vue 中。

<list-products :products="listProducts" @clicked-show-detail="clickedShowDetailModal"></list-products>

Example.

Answer 3

Nightmare 为$emit 找到“hello world”示例，所以我添加了下面的示例（最少的代码行+函数的语义名称）。

“Hello world”点击更改父数据

Vue.component('child', {
  template: `
<div class="child">
<button v-on:click="childMethod">CLICK - child Method pass data from product component</button>
</div>
`,
  data: function () {
    return {
      child_msg: "message from child"
    }
  },
  methods: {
    childMethod: function() {
      this.$emit('child-method', this.child_msg)
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    msg: "I am the blue parent!!!!!!!!!!!!!!!!!!",
  },
  methods: {
    updateParent(value_from_child) {
      this.msg = value_from_child;
      alert("hello child" + value_from_child)
    }
  }
})

.child{ background: gray; padding: 15px; }
button{ cursor: pointer; }
#app{ border: 1px red dashed; padding: 15px; background: lightblue; color: blue;
}

<div id="app">
  <p>{{msg}}</p>
  <!-- ###### The trick happens her ###### -->
  <child class="child" v-on:child-method="updateParent"></child>
</div> 

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

codepen：https://codepen.io/ezra_siton/pen/YzyXNox?editors=1010