Vue 注册子组件

<template>
  <div id="app">
    <!--可以把参数传递给componenta组件-->
    <componentA v-for="(key,value) in objList" :key="value">   {{key}}--{{value}}</componentA>
    <ul>
      <!--
        也可以代替{{}} 
        v-text="item.name +'-'+item.price"  
        :class="{odd:index%2}" 当index余2的时候隔行变色 
        
        
        
      <li v-for="(item,index) in list" :key="index" :class="{odd:index%2}" >
        {{item.name}}-{{index}}
      </li>
      -->
      <!-- 遍历-->
      <li v-for="(key,value) in objList" :key="value" >
           {{key}}--{{value}}
      </li>
    </ul>
  </div>
</template>

<script>
//链接子组件
import componentA from './components/a'
export default {
  //注册子组件
  components:{
    componentA:componentA
    },
  data() {
    return {
      HELLO: "<span>world</span>",
      num: 1,
      status: true,
      list: [
        {
          name: "apple",
          price: 34
        },
        {
          name: "ban",
          price: 34
        }
      ],
      objList:{
        name:'apple',
        price:34,
        color:'red',
        weight:14
      }
    }
  }
};
</script>

<style>
</style>