[Vue warn]：无法解析指令：ref

Question

我正在学习Vue.js中的组件。

模板是：

<script type="text/template" id="child1"> 
    <h3>This is the child1~!</h3> 
</script> 
<script type="text/template" id="child2"> 
    <h3>This is the child2~!</h3> 
</script> 
<script id="parent" type="text/template"> 
    <div> 
     <h2>This is the parent~!</h2> 
     <child1 v-ref:cc1></child1> 
     <child2 v-ref:cc2></child2> 
     <button v-on:click="getChildren">get children msg</button> 
    </div> 
</script> 

和JS是：

Vue.component('parent', { 
     template: '#parent', 
     methods: { 
      getChildren:function() { 
       alert(this.$refs.cc1); 
       alert(this.$refs.cc2); 
      } 
     }, 
     components: { 
      'child1': { 
       template: '#child1', 
       data: function() { 
        return { 
         msg: 'This is the child1 ~!' 
        } 
       } 
      }, 
      'child2': { 
       template: '#child2', 
       data: function() { 
        return { 
         msg: 'This is the child2 ~!' 
        } 
       } 
      } 
     } 
    }); 

Vue公司抛出

警告：vue.js：525 Vue公司警告]：无法解析指令：ref（在 组件中找到）

谁能告诉我为什么？谢谢！

Answer 1

您正在使用的Vue 2.0 Vue公司1.0伽马：

看到迁移文档：

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

所以，你应该使用：

<child1 ref="cc1"></child1> 
<child2 ref="cc2"></child2> 

或者是你在你的组件使用的哈巴狗/玉模板改变Vue的版本回到1.x的

Answer 2

除非你是在你的组件模板中使用帕格（原玉），你需要使用HTML：

template: '<div id="parent"></div>',