javascript - Vue.js。递归组件毁了我的生活

Question

我想从一个 XML 文件创建一个 TreeView ，我做到了。然而，当我决定让它更灵活时，我遇到了一些问题。

这是我的组件:

Vue.component('elname', {
  props: ['text'],
  template: '<span>{{ text }}</span>'
})


Vue.component('recursive', {
  props: ['d', 'liname', 'openclose'],
  template: '#recursive',
  data: function() {
    return {
      seen: true
    }
  }
  }
)

Vue 对象如下所示:

var appp = new Vue({
  el: '#here',
  data: function(){
    return {
      friends: '',
    }
  },
  beforeMount() {
    parser = new DOMParser();
    var response = "<scope><friend><name>Alex</name><hobbies><h>music</h><h>salsa</h></hobbies></friend><friend><name>Natasha</name><hobbies><h>hiking</h></hobbies></friend></scope>";
    xml = parser.parseFromString(response, 'text/xml');
    children = xml.getElementsByTagName('scope')[0];
    this.friends = children;
  }
})

我在 recursive 组件中有这个变量 seen

Vue.component('recursive', {
  props: ['d', 'liname', 'openclose'],
  template: '#recursive',
  data: function() {
    return {
      seen: true // <-- here it is
    }
  }
  }
)

它必须更改其值 @click 事件以隐藏嵌套列表(请参阅 JSfiddle )，但当它更改时，它会在几个组件中更新其值。

如何让它的值只在特定的组件中更新？

这是一个模板:

<div id="here">
  <recursive :d="friends" openclose="[-]"></recursive>
</div>

<template id="recursive">
  <div>
    <ul v-if="d.children.length != 0">
      <li v-for="n in d.childNodes" @click="seen = !seen">
        <elname :text="n.tagName"></elname>
        {{ openclose }}
        {{seen}} <!-- it is just for testing purposes to illustrate how seen var changes -->
        <recursive :d="n" openclose="[-]"></recursive>
      </li>
    </ul>
    <ul v-else>
      <elname :text="d.textContent"></elname>
    </ul>
  </div>
</template>

Answer 1

你有两个问题:

1. 您需要使用click.stop，这样点击事件就不会传播给 parent
2. 您的递归 中需要一个组件来处理切换

Vue.component('elname', {
  props: ['text'],
  template: '<span>{{ text }}</span>'
});

Vue.component('recursive', {
  props: ['d', 'openclose'],
  template: '#recursive',
  components: {
    toggler: {
      data() {
        return {
          seen: true
        }
      },
      methods: {
        toggle() {
          this.seen = !this.seen;
        }
      }
    }
  }
});

var appp = new Vue({
  el: '#here',
  data: function() {
    return {
      friends: '',
    }
  },
  beforeMount() {
    parser = new DOMParser();
    var response = "<scope><friend><name>Alex</name><hobbies><h>music</h><h>salsa</h></hobbies></friend><friend><name>Natasha</name><hobbies><h>hiking</h></hobbies></friend></scope>";
    xml = parser.parseFromString(response, 'text/xml');
    children = xml.getElementsByTagName('scope')[0];
    this.friends = children;
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js" integrity="sha256-Ab5a6BPGk8Sg3mpdlsHzH6khPkniIWsvEuz8Fv/s9X8=" crossorigin="anonymous"></script>

<div id="here">
  <recursive :d="friends" openclose="[-]"></recursive>
</div>

<template id="recursive">
  <div>
    <ul v-if="d.children.length != 0">
      <li is="toggler" v-for="n in d.childNodes" inline-template>
        <div @click.stop="toggle">
          <elname :text="n.tagName"></elname>
          {{ openclose }}
          <recursive v-if="seen" :d="n" openclose="[-]"></recursive>
        </div>
      </li>
    </ul>
    <ul v-else>
      <elname :text="d.textContent"></elname>
    </ul>
  </div>
</template>