vue递归组件自定义事件-我爱编程

当前位置：: 首页; 文章; 前端
详情

vue递归组件自定义事件

前端
三生万物
0

关于递归组件只调用一次的问题，解决方案示例：

父组件：parent.vue

<template>
  <div>
    <Tree :data="data" @nodeClick="nClick"></Tree>
  </div>
</template>

<script>
  import Tree from './components/tree.vue'
  export default {
    components: {Tree},
    name: 'app',
    data(){
      return {
        data: {
          'title': '111',
          'children': [
            {
              'title': '111-1'
            }, 
            {
              'title': '111-2',
              'children': [
                {'title': '111-2-1'}
              ]
            }
          ]
        }
      }
    },
    methods: {
      nClick(title){
          console.log(title)
      }
    }
  }
</script>

树状组件：components/tree.vue，在递归组件中再注册下自定义事件

<template>
  <ul>
    <li>
      <span v-html="data.title" @click="handleClick(data.title)"></span>
      <m-tree v-for="(item , idx) in data.children" :data="item" :key="idx" @nodeClick="outClick"></m-tree>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'mTree',
    props: {
      data: {
        type: Object,
        default (){
          return {}
        }
      }
    },
    methods: {
      handleClick(title){
        this.$emit('nodeClick',title);
      },
      outClick(title){
          this.$emit('nodeClick',title);
      }
    }
  }
</script>

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。