vue 递归组件

最新推荐文章于 2024-02-27 12:01:27 发布

无称可用

最新推荐文章于 2024-02-27 12:01:27 发布

阅读量52

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43992788/article/details/117034090

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<div id="app">
  <input type="text" v-model="a">
  <tree-list :list="list"></tree-list>
</div>
  <template id="treelist">
   <div>
    <ul >
      <li v-for="item in list"> 
        {{item.title}}
        <div v-if="item.children">
          <tree-list :list="item.children"></tree-list>
        </div>
      </li>
    </ul>
   </div>
  </template>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script type="text/javascript">
let TreeList={
  template:"#treelist",
  name:"tree-list",
  props:['list']
}
	var app = new Vue({
    el: '#app',
    data: {
	    a:1,
	    b:2,
      list:[
        {
          title:"湖南省",
          children:[
            {
              title:'长沙市',
              children:[
                {title:"岳麓区"},
                {title:"芙蓉区"}
              ]
            },
            {
              title:"衡阳市"
            },
            {
              title:"株洲市"
            }
          ]
        },
        {
          title:"安徽"
        },
        {
          title:"四川"
        }
      ]
    },
    components:{
      TreeList
    },
    beforeCreate(){
      console.log(window)
    },
    created(){
    },
    updated (){
      console.log("触发了")
    },
    methods: {
    }
})

</script>
</html>

无称可用

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 递归组件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body><div id="app"> <input type="text" v-model="a"> <tree-list :list="list"></tree-list></div&g
复制链接

扫一扫