在Vuejs中将数据从子级传递给父级(有这么复杂吗?) [英] Pass data from child to parent in Vuejs (is it so complicated?)

问题描述

感谢您阅读我的问题.

我已经读过它:

vuejs 从子组件更新父数据

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

概念是一样的，我需要将一个数据对象从子级传递给父级.我已经使用 $emit 将数据传递给父组件，但它不起作用.你知道有什么问题吗?你可以在这里查看我的代码:

Vue.component('list-products', {分隔符:['[[', ']]'],模板:'#list-products-template',道具:['产品']，数据:函数(){返回 {产品选择:{}}},方法: {showDetailModal:功能(产品){console.log('单击子项中的产品，如何将此产品传递给父项中的 productSelected 数据?');控制台日志(产品)；this.productSelected = 产品；this.$emit('clickedShowDetailModal', product);}}});var app = new Vue({分隔符:['[[', ']]'],el: '#resultComponent',数据: {列表产品: [{'name':'test1',id:1},{'name':'test2',id:2},{'name':'test3',id:3}],产品选择:{}},方法: {clickedShowDetailModal:函数(值){console.log('value');控制台日志(值)；this.productSelected = 值；}}});

<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>

<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="更多福利"><a @click="showDetailModal(product)">点击我 [[ product.name ]] 并查看 console.log »</a>

</script>

提前致谢.

解决方案

您没有在收听事件.我将事件名称更改为 clicked-show-detail.试试这个.

在组件的 showDetailModal 方法中.

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

在你的 Vue 中.

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

示例.

Thanks for reading my question.

I have read about it:

vuejs update parent data from child component

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

The concept is the same, I need to pass a data object from child to parent. I have used $emit to pass data to parent component but it doesn't works. Do you know what is wrong? You can check my code here:

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>

Thanks in advance.

解决方案

You aren't listening to the event. I changed the event name to clicked-show-detail. Try this.

In the showDetailModal method of your component.

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

In your Vue.

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

Example.

这篇关于在Vuejs中将数据从子级传递给父级(有这么复杂吗?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！