调用vue组件时怎么传入数据

Question

做的一个页面中有很多重复的块，块的样式相同，主要代码也一样，但是图片、价格、详情等都不一样，怎么实现调用组件时传入图片价格等信息，求解答。

<div id="app">
            <button-counter></button-counter>
            <button-counter></button-counter>
        </div>
        <template id="test">
            <div class="products">
                <div class="image_1">
                    <a href="#" class="p_link">
                        <img src="{{image_link}}" >
                    </a>
                </div>
                <div class="info_1">
                    <a href="#" class="p_link">
                    <font style="color: black;">{{bookName}}</font><br>
                    </a>
                    <font style="color: darkred;">惊喜价：¥{{newPrice}}</font><br>
                    <font style="color: gray; font-size: calc(14px);">市场价：¥
                    <font style="text-decoration: line-through;">{{oldPrice}}</font>
                    </font>
                </div>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
            //  组件注册
            Vue.component('button-counter', {
                data (name, nPrice, oPrice) {
                    return {
                        image_link: "../image/bookimage/It'samiracle.jpg",
                        bookName: name,
                        newPrice: nPrice,
                        oldPrice: oPrice
                    }
                },
                template: '#test',
                methods: {
                    handle: function() {
                        this.count++;
                    }
                }
            });
            //创建Vue实例,得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {},
                methods: {}
            });
        </script>

Answer 1

父组件把图片价格等这个json传给子组件，子组件用props接收，如：

<!--父组件调用子组件-->
<child-component :productData="商品属性对象"/>

<!--子组件接收数据-->
 props: {
      productData: {
        type: Object,
        default: {}
      }
    },