组件传参——props传参

props传参：注意这种方式只能是 父传子（父组件的数据传递给子组件）

步骤有四：

        一、准备一些数据将来可以传递给 子组件

goodsList: [
    {
       id: 1,
       title: '手机',
       content: 'OPPO 一加 Ace 2 12GB+256GB 冰河蓝 满血版骁龙®8+旗舰平台 1.5K灵犀触控屏'
    },
    {
       id: 2,
       title: '平板',
       content: 'Apple iPad（第 9 代）10.2英寸平板电脑 2021年款（64GB WLAN版/A13芯片'
    },
],

        二、在父组件中调用子组件的时候，可以去给 子组件 绑定一些数据，单向绑定就行

<son :abc="msg" num="10086"></son>

        三、在子组件中配置一个 props选项，用于接收父组件传递过来的内容

app.component('son', {
            template: '#tem',
            data() {
                return {}
            },

            // 2. 在子组件中配置一个 props 选项, 用于接受父组件传递过来的内容
            props: ['abc', 'num']
})

        四、在子组件中可以使用了

  <template id="tem">
        <div>
            <!-- 3. 在子组件中就可以使用了 -->
            <h5> {{abc}} </h5>
            <h5> {{num}} </h5>
            <hr>
        </div>
</template>

      注意: vue 在处理循环标签的时候, 你添加的 key 属性是不会传递给 子组件的