Question

我有一种情况，在VUE中我需要从子级内部以及父级中访问子级函数。我有一个工作示例，但必须有更好的方法从父级访问子函数。

该示例有几个事件侦听器，在单击或按下时应该展开。我想使用父级child.do_something的父EventListener方法。

有没有比这更好的方式来使用孩子？

＆＃13;

// CHILD is a component that needs access to its own click method
var child = {
  props: ['item'],

  data: function() {
    return {
      isActive: false
    }
  },

  template: `
    <div class="key" :class="{playing: isActive}" v-on:click='do_something'>
      <kbd class="noselect">{{ item.kbd }}</kbd>
    </div>
  `,

  methods: {
    do_something: function(event) {
      this.isActive = !this.isActive
      // DO OTHER STUFF too
    },
  },
}


//PARENT also need to access do_something for the right object when a key is pressed
var parent = new Vue({
  el: '#parent',
  data: {
    keysList: [{
        keyCode: "65",
        kbd: "A"
      },
      {
        keyCode: "83",
        kbd: "S"
      },
    ],
  },
  components: {
    'child': child,
  },
  methods: {
    keystroke: function(keyCode) {
      //FIND THE CHILD AND EXECUTE...THIS IS THE TERRIBLE PART
      const child = this.$children.find(child => {
        return child.$vnode.data.key === keyCode.toString()
      });
      child.do_something()
    }
  },
  created: function() {
    window.addEventListener('keydown', (e) => this.keystroke(e.keyCode));
  }
})

＆＃13;

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  margin: 1rem;
  transition: all .07s ease;
  color: white;
  background: rgba(0, 0, 0, 0.77);
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div class="keys" id='parent'>
  <child v-for="(item,index) in keysList" :item="item" :key="item.keyCode"></child>
</div>

＆＃13;

Answer 1

您可以使用ref然后通过索引引用您需要的特定子项。这样可以避免使用内部值。

<child v-for="(item,index) in keysList" :item="item" :key="item.keyCode" ref="children"></child>

在keystroke：

const index = this.keysList.findIndex(k => k.keyCode == evt.keyCode)
this.$refs.children[index].do_something()

这里修改了代码。

// CHILD is a component that needs access to its own click method
var child = {
  props: ['item'],

  data: function() {
    return {
      isActive: false
    }
  },

  template: `
    <div class="key" :class="{playing: isActive}" v-on:click='do_something'>
      <kbd class="noselect">{{ item.kbd }}</kbd>
    </div>
  `,

  methods: {
    do_something: function(event) {
      this.isActive = !this.isActive
      // DO OTHER STUFF too
    },
  },
}


//PARENT also need to access do_something for the right object when a key is pressed
var parent = new Vue({
  el: '#parent',
  data: {
    keysList: [{
        keyCode: "65",
        kbd: "A"
      },
      {
        keyCode: "83",
        kbd: "S"
      },
    ],
  },
  components: {
    'child': child,
  },
  methods: {
    keystroke: function(evt) {
      const index = this.keysList.findIndex(k => k.keyCode == evt.keyCode)
      this.$refs.children[index].do_something()
    }
  },
  created: function() {
    window.addEventListener('keydown', this.keystroke);
  }
})

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  margin: 1rem;
  transition: all .07s ease;
  color: white;
  background: rgba(0, 0, 0, 0.77);
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div class="keys" id='parent'>
  <child v-for="(item,index) in keysList" :item="item" :key="item.keyCode" ref="children"></child>
</div>

或者为每个孩子使用不同的参考的更直接的方法。

<child v-for="(item,index) in keysList" :item="item" :key="item.keyCode" :ref="item.keyCode"></child>

在keystroke：

this.$refs[evt.keyCode][0].do_something()

这里不幸的部分是因为ref被设置为循环的一部分，每个ref是一个元素的数组。如果我想到一种方法，我会在其中进行编辑。

这就是工作。

// CHILD is a component that needs access to its own click method
var child = {
  props: ['item'],

  data: function() {
    return {
      isActive: false
    }
  },

  template: `
    <div class="key" :class="{playing: isActive}" v-on:click='do_something'>
      <kbd class="noselect">{{ item.kbd }}</kbd>
    </div>
  `,

  methods: {
    do_something: function(event) {
      this.isActive = !this.isActive
      // DO OTHER STUFF too
    },
  },
}


//PARENT also need to access do_something for the right object when a key is pressed
var parent = new Vue({
  el: '#parent',
  data: {
    keysList: [{
        keyCode: "65",
        kbd: "A"
      },
      {
        keyCode: "83",
        kbd: "S"
      },
    ],
  },
  components: {
    'child': child,
  },
  methods: {
    keystroke: function(evt) {
      this.$refs[evt.keyCode][0].do_something()
    }
  },
  created: function() {
    window.addEventListener('keydown', this.keystroke);
  },
})

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  margin: 1rem;
  transition: all .07s ease;
  color: white;
  background: rgba(0, 0, 0, 0.77);
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div class="keys" id='parent'>
  <child v-for="(item,index) in keysList" :item="item" :key="item.keyCode" :ref="item.keyCode"></child>
</div>

Answer 2

您可以通过向父数据键列表中添加一个有效的属性来实现此目的。更新匹配击键的活动属性。当您将项目作为道具传递给您的孩子时，您可以使用道具中的item.active。您不需要孩子的isActive数据。

父：

    var parent = new Vue({
  el: '#parent',
  data: {
    keysList: [{
        keyCode: "65",
        kbd: "A",
        active: false
      },
      {
        keyCode: "83",
        kbd: "S",
        active: false
      }
    ],
  },
  components: {
    'child': child,
  },
  methods: {
    keystroke: function(keyCode) {
      this.keysList.forEach(key => {key.active = key.keyCode === keyCode.toString()});
    }
  },
  created: function() {
    window.addEventListener('keydown', (e) => this.keystroke(e.keyCode));
  }
})

<div class="keys" id='parent'>
  <child v-for="(item,index) in keysList" :item="item" :key="item.keyCode" :isActive="item.active"></child>
</div>

子：

    var child = {
  props: ['item'],

  template: `
    <div class="key" :class="{playing: item.active}" v-on:click='do_something'>
      <kbd class="noselect">{{ item.kbd }}</kbd>
    </div>
  `,

  methods: {
    do_something: function(event) {
       // DO OTHER STUFF too
    },
  },
}

通过这种方式，您只需在一个地方管理州，而您无需从父母那里接触您的孩子

VUE 2+访问子方法

2 个答案: