javascript - 在插值中访问 $refs 不起作用/导致错误(Vue.js 2.x 组件)

Question

我做了以下codepen :

const sidebar = {
  name: "sidebar",
  template: "<p>SIDEBAR</p>",
  data() {
    return {
      active: true
    };
  },
  methods: {
    test() {
      alert("test: " + this.active)
    }
  }
};
new Vue({
  el: '#app',
  name: 'vue-instance',
  
  data() {
    return {
      title: "Title of the page"
    };
  }, 
  components: {
    sidebar: sidebar,  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    {{ title }}
  
    <sidebar ref="sidebar1">
    </sidebar>
  
  <button type="button" v-on:click="$refs.sidebar1.test()">Test sidebar</button>
   
<!-- {{ $refs.sidebar1.active }} this causes error! -->
  {{ $refs }}
</div>

注释行导致错误:"message": "$refs.sidebar1 is undefined",

所以看起来在渲染时的父组件中 $refs 集合是空的，但是稍后，当单击按钮时，$refs工作正常，可以正确访问组件 sidebar1。

为什么会这样呢？如何让插值 {{ $refs.sidebar1.active }} 在父组件模板中工作？

提前谢谢您!

Answer 1

Why is it so? How could one get the interpolation$refs.sidebar1.active working in the parent component template?

仅当在父 render 函数中创建子组件且 refs 字段根本不具有反应性时，Vue 才能填充 refs。

当您指定点击处理程序时，它会包装在函数中，并且仅在您单击按钮时执行(如预期)，此时 refs 已设置(因为初始渲染过程已结束)并且没有错误。

Vue 文档:Accessing Child Component Instances

作为示例的解决方案:您可以使用 props 从外部控制子级，并使用 sync 修饰符来允许子级更改 prop，例如 v-model。将 refs 的工作提取到某些父函数中也会更具可读性:

const sidebar = {
  name: "sidebar",
  template: "<p>SIDEBAR</p>",
  props: ['active'],
  methods: {
    test() {
      alert("test: " + this.active)
    }
  }
};
new Vue({
  el: '#app',
  name: 'vue-instance',
  
  data() {
    return {
      active: false,
      title: "Title of the page"
    };
  }, 
  methods: {
    testChild() {
      this.$refs.sidebar1.test();
    }
  },
  components: {
    sidebar: sidebar,  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    {{ title }}
  
    <sidebar ref="sidebar1" :active.sync="active">
    </sidebar>
  
  <button type="button" v-on:click="active = !active">Toggle</button>
  <button type="button" v-on:click="testChild">Test child</button>
   
<!--      {{ $refs.sidebar1.active }} this causes error! -->
  {{ active }}
</div>