Vue 递归组件与动态样式绑定

组件是可以在自己的模板中调用自身的，不过它们只能通过name选项

<template>
  <div>
  <div class="item" v-for="(item,index) in list" :key="index">
    <span class="item-back"></span>
    <div class="item-title border-bottom">{{item.title}}</div>
    <div v-if="item.children" class="item-children">
      <!--递归组件-->
      <detail-list :list="item.children"></detail-list>
    </div>
// v-if如果item 有孩子 就会渲染 没有就不渲染
  </div>
  </div>
</template>

<script>
    export default {
        name: "detailList",  
        props: {
            list: Array
        }
    }
</script>

动态样式绑定
将style写在data里面

<div :style="styleObj"></div>
data(){
    return{
    styleObj:{background:'url(路径) no-repeat center',backgroundSize:'100% 100%'}
    } 
}