Как передать переменную в компонент vue.js?

Question

[Vanya Huk]

в меня есть рабочий код

<template>
    <div class="row no-margin catalog-content-wrap">

        <div class="col-md-4 col-sm-4 col-xs-6 mob-product" v-for="product in $parent.products">
            <div class="product" data-product-id="product.id"  onmouseenter="$(this).addClass('active')" onmouseleave="$(this).removeClass('active')" >
         
                <div class="product-link text-center">
                    <div class="img-wrap">
                        <a :href=" '/product/' + product.slug">
                            <img class="img-responsive" :src="Website.origin + '/uploads/thumbs/' + product.picture.name" />
                        </a>
                    </div>
                    <a class="product_name"   :href=" '/product/' + product.slug" :data-title="product.title">{{product.title }}</a>
                    <div class="price" v-if="product.price  > 0 && product.stock == 1">
                        <span>{{product.price}}</span> {{$parent.currency}}
                    </div>
                    <div class="product-other-info">
                        <a class="buy"  v-if="product.price  > 0 && product.stock == 1"  href="javascript:void(0);" onclick="Cart.add(this)" :data-product-id="product.id"><i class="fa fa-shopping-basket" aria-hidden="true"></i> {{$parent.loc.buy}}</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

я хочу вывести все из блока с слассом mob-product в отдельный компонент , на выходе получить что-то типа

<template>
    <div class="row no-margin catalog-content-wrap">
              <product v-for="product in $parent.products" ></product>
    </div>
</template>

а в темплете product работать только с переменной product

но js почему-то не видит переменной

Answer 1

[Evgeny Kulakov]

Вы создаете только список элементов product, а еще нужно в сам элемент передать нужную переменную:

<product v-for="product in $parent.products" :product="product"></product>

Answer 2

[RaulDuke]

Добрый день, очень рекомендую по этой теме обратиться к документации вью. Связь компонентов это одна из важнейших тем в этом фреймворке (на мой взгляд).

Я, в зависимости от ситуации (если нужна связь в обе стороны, например), бывает творю такое "хулиганство":

<product :key="product.id"
  v-for="product in $parent.products"
  v-model="product">
</product>

Компонент:

<template>
<div class="product" data-product-id="value.id"  @click="onChecked" >
  <!-- product template -->
</div>
</template>

<style>
.product { /** some thing **/ }
</style>

<script>
export default {
  name: 'product',
  props: ['value'],
  methods: {
    onChecked() {
      this.$emit('input', this.value.id);
    }
  }
}
</script>

Answer 3

[RidgeA]

вот так, если я правильно понял вопрос
https://vuejs.org/v2/guide/components.html#Props