[英][Vue warn]: Failed to resolve directive: ref
I'm learning about Components in Vue.js.我正在学习 Vue.js 中的组件。
The template is:模板是:
<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>
and the JS is: 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 throws Vue 抛出
warn:vue.js:525 [Vue warn]: Failed to resolve directive: ref (found in component )
警告:vue.js:525 [Vue 警告]:无法解析指令:ref(在组件中找到)
Who can tell me why?谁能告诉我为什么? Thanks!
谢谢!
You are using Vue 2.0 with Vue 1.0 gramma:您正在使用 Vue 2.0 和 Vue 1.0 语法:
see the migration documentation:请参阅迁移文档:
https://v2.vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced https://v2.vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced
So, you should use:所以,你应该使用:
<child1 ref="cc1"></child1>
<child2 ref="cc2"></child2>
Or change the Vue version back to 1.x或者将 Vue 版本改回 1.x
除非您在组件模板中使用 Pug(以前称为 Jade),否则您需要使用 HTML:
template: '<div id="parent"></div>',
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.