訪問Vue組件內的孩子

Question

我是Vuejs的新手，有一個我無法解決的問題。

以下是我的HTML：

<div id="app" class="container">
  <template id="upload-button">
    <button class="btn btn-primary" data-loading-text="Uploaden" @click="uploadButtonClicked">
      Uploaden
    </button>
    <input ref="uploadTag" type="file" name="{{name}}" accept="{{mime}}"  />
  </template>  
  <upload-button url="http://www.google.com" method="post" name="pol" mime=".json"></upload-button>
</div>

這是JS：

Vue.component('upload-button', {
  template: '#upload-button',
  props:{
    url: String,
    method: String,
    name: String,
    mime: String
  }, 
  methods:{
    uploadButtonClicked: function(){
        console.log(this.$refs);
        var uploadTag = this.$refs.uploadTag;
      alert(uploadTag);
    }
  },
});

var vue = new Vue({
  el: '#app',
});

問題是this.$refs始終保持為空。 我在文檔中讀到，安裝該組件后會填充它。 單擊按鈕元素時，我認為該組件已安裝。 真的嗎？ 我想念什么？

Answer 1

您在控制台中看嗎？ 您會很快看到Vue尚未呈現您的頁面，因為您的模板無效。 您需要從輸入中刪除動態屬性，然后將組件模板從app下的子樹中移出。 當Vue能夠生成渲染函數時，您的$refs就可以正常工作。

這是在jsfiddle中工作的標記更改...

<div id="app" class="container">  
  <upload-button url="http://www.google.com" method="post" name="pol" mime=".json"></upload-button>
</div> 
<template id="upload-button">
  <div>
    <button class="btn btn-primary" data-loading-text="Uploaden" @click="uploadButtonClicked">
      Uploaden
    </button>
    <input ref="uploadTag" type="file" name="garbage" accept="application/json"  />
  </div>
</template>