[Vue 警告]：无法解析指令：ref答案

【问题标题】：[Vue warn]: Failed to resolve directive: ref[Vue 警告]：无法解析指令：ref
【发布时间】：2017-05-28 10:03:41
【问题描述】：

我正在学习 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 抛出

warn:vue.js:525 [Vue 警告]：无法解析指令：ref（在组件）

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

【问题讨论】：

您是否在组件中使用 pug/jade 模板？

标签： javascript vue.js

【解决方案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

【讨论】：

【解决方案2】：

除非您在组件模板中使用 Pug（以前称为 Jade），否则您需要使用 HTML：

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

【讨论】：