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

Question

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

这是我的组件：

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;
  }
})

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

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

它必须更改其 value@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这样的点击事件不会传播给父母
2. 你需要一个内部组件recursive来处理切换

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>