blocks|key|110533|text|您忘记了Vue+initialization中的components部分。所以Vue实际上并不知道你的组件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|110534|将其更改为：|110535|var+myTask+=+Vue.component('my-task',+{
+template:+'#task-template',
+data:+function()+{
++return+this.tasks;+//Notice:+in+components+data+should+return+an+object.+For+example+"return+{+someProp:+1+}"
+},
+props:+['task']
});

new+Vue({
+el:+'#app',
+data:+{
++tasks:+[{
++++name:+"task+1",
++++completed:+false
+++},
+++{
++++name:+"task+2",
++++completed:+false
+++},
+++{
++++name:+"task+3",
++++completed:+true
+++}
++]
+},
+components:+{
++myTask:+myTask
+},
+methods:+{

+},
+computed:+{

+},
+ready:+function()+{

+}

});|code-block|syntax|javascript|110536|下面是看起来一切正常的jsBin：http://jsbin.com/lahawepube/edit?html,js,output|110537|更新|BOLD|110538|有时，您希望您的组件对其他组件全局可见。|110539|在这种情况下，您需要在Vue+initialization或export之前以这种方式注册您的组件(以防您想从其他组件注册组件)|110540|Vue.component('exampleComponent',+require('./components/ExampleComponent.vue'));+//component+name+should+be+in+camel-case|110541|在将组件添加到vue+el中之后|110542|<example-component></example-component>|110543|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/lahawepube/edit?html,js,output^0|4|I|O|A|0|0|0|H|1B|0|0|0|2|0|0|B|I|U|6|0|0|7|6|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|O|3|P|5|6|7|1K|8|@$9|1L|A|1M|B|Q]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1N|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|V|3|W|5|J|7|1T|8|@]|D|@]|E|$K|L]]|$1|X|3|Y|5|6|7|1U|8|@$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|Z|3|10|5|J|7|1X|8|@]|D|@]|E|$K|L]]|$1|11|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]]]

You forgot about the <code>components</code> section in your <code>Vue initialization</code>. So Vue actually doesn't know about your component.

Change it to: 

<pre><code>var myTask = Vue.component('my-task', {
 template: '#task-template',
 data: function() {
 return this.tasks; //Notice: in components data should return an object. For example "return { someProp: 1 }"
 },
 props: ['task']
});

new Vue({
 el: '#app',
 data: {
 tasks: [{
 name: "task 1",
 completed: false
 },
 {
 name: "task 2",
 completed: false
 },
 {
 name: "task 3",
 completed: true
 }
 ]
 },
 components: {
 myTask: myTask
 },
 methods: {

 },
 computed: {

 },
 ready: function() {

 }

});
</code></pre>

And here is jsBin, where all seems to works correctly: <a href="http://jsbin.com/lahawepube/edit?html,js,output" rel="noreferrer">http://jsbin.com/lahawepube/edit?html,js,output</a>

UPDATE

Sometimes you want your components to be globally visible to other components.

In this case you need to register your components in this way, before your <code>Vue initialization</code> or <code>export</code> (in case if you want to register component from the other component)

<pre><code>Vue.component('exampleComponent', require('./components/ExampleComponent.vue')); //component name should be in camel-case
</code></pre>

After you can add your component inside your <code>vue el</code>:

<pre><code>&lt;example-component&gt;&lt;/example-component&gt;
</code></pre>

blocks|key|110545|text|只需在new+vue()之前定义Vue.component()即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|110546|Vue.component('my-task',{
+++++.......
});

new+Vue({
++++.......
});|code-block|syntax|javascript|110547|更新|BOLD|110548|110549|HTML将<anyTag>转换为<anytag>+|unordered-list-item|110550|，因此请不要使用大写字母作为组件名称|110551|，而不是使用<myTag>使用HTML|110552|110553|Github问题：https://github.com/vuejs/vue/issues/2308|110554|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vuejs/vue/issues/2308^0|3|9|G|F|0|0|0|2|0|0|5|8|G|8|0|0|6|7|0|0|9|14|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@$9|1D|A|1E|B|M]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|R|3|S|5|Q|7|1L|8|@]|D|@]|E|$]]|$1|T|3|U|5|Q|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|Y|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

Just define <code>Vue.component()</code> before <code>new vue()</code>.

<pre><code>Vue.component('my-task',{
 .......
});

new Vue({
 .......
});
</code></pre>

update

<ul>
<li>HTML converts <code>&lt;anyTag&gt;</code> to <code>&lt;anytag&gt;</code> </li>
<li>So don't use captital letters for component's name</li>
<li>Instead of <code>&lt;myTag&gt;</code> use <code>&lt;my-tag&gt;</code></li>
</ul>

Github issue : <a href="https://github.com/vuejs/vue/issues/2308" rel="noreferrer">https://github.com/vuejs/vue/issues/2308</a>

blocks|key|2656479|text|当我遇到这个问题时，我正在遵循https://vuejs.org/v2/guide/index.html上的Vue文档。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2656480|随后，他们阐明了语法：|2656481|2656482|到目前为止，我们只使用Vue.component全局注册了组件：|blockquote|2656483|2656484|Vue.component(‘我的组件名称’，{+//+...选项...+})|2656485|全局注册的组件可以在之后创建的任何根+Vue实例(新Vue)的模板中使用-甚至可以在该Vue实例的组件树的所有>子组件中使用。|style|BOLD|2656486|2656487|(https://vuejs.org/v2/guide/components.html#Organizing-Components)|2656488|因此，正如Umesh上面所说的，只要确保全局组件定义在var+app+=+new+Vue({})实例化之前。|CODE|2656489|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/v2/guide/index.html|1|https://vuejs.org/v2/guide/components.html#Organizing-Components^0|F|11|0|0|0|0|0|0|0|5|5|J|18|0|0|0|1U|1|1S|1|0|0|1I|R|L|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|1C|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|1E|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1F|8|@$A|1G|B|1H|O|P]|$A|1I|B|1J|O|P]]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1L|8|@$A|1M|B|1N|O|P]]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|T|3|U|5|6|7|1R|8|@$A|1S|B|1T|O|P]|$A|1U|B|1V|O|V]]|9|@]|C|$]]|$1|W|3|-4|5|6|7|1W|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]]]

I was following along the Vue documentation at <a href="https://vuejs.org/v2/guide/index.html" rel="nofollow noreferrer">https://vuejs.org/v2/guide/index.html</a> when I ran into this issue.

Later they clarify the syntax:

<blockquote>
 So far, we’ve only registered components globally, using Vue.component:

<pre><code> Vue.component('my-component-name', {
 // ... options ...
 })
</code></pre>
 
 Globally registered components can be used in the template of any root 
 Vue instance (new Vue) created afterwards – and even inside all >subcomponents of that Vue instance’s component tree.
</blockquote>

(<a href="https://vuejs.org/v2/guide/components.html#Organizing-Components" rel="nofollow noreferrer">https://vuejs.org/v2/guide/components.html#Organizing-Components</a>)

So as Umesh Kadam says above, just make sure the global component definition comes before the <code>var app = new Vue({})</code> instantiation.

blocks|key|2867483|text|这是在vue中创建组件的好方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2867484|let+template+=+`<ul>
++<li>Your+data+here</li>
</ul>`;

Vue.component('my-task',+{
++template:+template,
++data()+{

++},
++props:+{
++++task:+{
++++++type:+String
++++}
++},
++methods:+{

++},
++computed:+{

++},
++ready()+{

++}
});

new+Vue({
+el+:+'#app'
});|code-block|syntax|javascript|2867485|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is a good way to create a component in vue.

<pre><code>let template = `&lt;ul&gt;
 &lt;li&gt;Your data here&lt;/li&gt;
&lt;/ul&gt;`;

Vue.component('my-task', {
 template: template,
 data() {

 },
 props: {
 task: {
 type: String
 }
 },
 methods: {

 },
 computed: {

 },
 ready() {

 }
});

new Vue({
 el : '#app'
});
</code></pre>

blocks|key|113041|text|请确保已将组件添加到组件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113042|例如：|113043|export+default+{
data()+{
++++return+{}
},
components:+{
++++'lead-status-modal':+LeadStatusModal,
},
}|code-block|syntax|javascript|113044|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Be sure that you have added the component to the components.

For example:

<pre><code>export default {
data() {
 return {}
},
components: {
 'lead-status-modal': LeadStatusModal,
},
}
</code></pre>

blocks|key|2656551|text|这为我解决了问题:我提供了第三个参数，它是一个对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2656552|在app.js中(使用laravel和webpack)：|offset|length|style|CODE|2656553|Vue.component('news-item',+require('./components/NewsItem.vue'),+{
++++name:+'news-item'
});|code-block|syntax|javascript|2656554|entityMap^0|0|1|6|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This solved it for me: I supplied a third argument being an object.

in <code>app.js</code> (working with laravel and webpack):

<pre><code>Vue.component('news-item', require('./components/NewsItem.vue'), {
 name: 'news-item'
});
</code></pre>

blocks|key|113071|text|不要过度使用Vue.component()，它会全局注册组件。您可以创建文件，将其命名为MyTask.vue，在那里导出Vue+object+https://vuejs.org/v2/guide/single-file-components.html，然后在主文件中导入，并且不要忘记注册它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|113072|new+Vue({
...
components:+{+myTask+}
...
})|code-block|syntax|javascript|113073|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/v2/guide/single-file-components.html^0|6|F|1Z|1I|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

Don't overuse <code>Vue.component()</code>, it registers components globally. You can create file, name it MyTask.vue, export there Vue object 
<a href="https://vuejs.org/v2/guide/single-file-components.html" rel="nofollow noreferrer">https://vuejs.org/v2/guide/single-file-components.html</a>
and then import in your main file, and don't forget to register it:

<pre><code>new Vue({
...
components: { myTask }
...
})
</code></pre>

blocks|key|110604|text|我遇到了与相同的错误|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|110605|110606|+Vue+warn:未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供"name“选项。|blockquote|110607|110608|110609|但是，我完全忘记了运行npm+install+&&+npm+run+dev来编译js文件。|CODE|110610|也许这对像我这样的新手有帮助。|110611|entityMap^0|5|5|0|0|0|0|0|B|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|W|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|X|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|Z|8|@$9|10|A|11|B|N]]|D|@]|E|$]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

I had the same error
<blockquote>
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the &quot;name&quot; option.
</blockquote>
however, I totally forgot to run <code>npm install &amp;&amp; npm run dev</code> to compiling the js files.
maybe this helps newbies like me.

blocks|key|2867557|text|好吧，这个错误可能看起来很明显，但有一天我在寻找答案，结果发现我有2次组件被声明。这让我抓狂，因为当你声明它2次时，VueJS一点都不会抱怨，很明显，我在两者之间有很多代码，当我添加一个新组件时，我把声明放在顶部，而我也有一个接近底部。所以下次先找这个，节省了很多时间|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2867558|entityMap^0|Z|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

OK, this error may seem obvious, but one day I was looking for an answer JUST TO FOUND OUT THAT I HAD 2 times COMPONENTS declared. it was driving me nuts as VueJS does not complain at all when you declare it 2 times, obvious I had a lot of code in between, and when I added a new component, I placed the declaration in the top, while I also had one close to the bottom. So next time looks for this first, saves a lot of time

blocks|key|2656588|text|Vue在这方面肯定有一些bug。我发现尽管像这样注册一个组件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2656589|components:+{+MyComponent+}|code-block|syntax|javascript|2656590|将在大部分时间内工作，并且可以自动用作组件或my-+MyComponent，有时您必须这样拼写它|2656591|components:+{+'my-component'+:+MyComponent+}|2656592|并严格使用它作为my-component|2656593|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Vue definitely has some bugs around this. I find that although registering a component like so
<pre><code>components: { MyComponent }
</code></pre>
will work most of the time, and can be used as MyComponent or my-component automatically, sometimes you have to spell it out as such
<pre><code>components: { 'my-component' : MyComponent }
</code></pre>
And use it strictly as my-component

blocks|key|2656595|text|我只花了一个小时来写这条消息--通常很容易解决。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2656596|我得到这个错误是因为我忘了在主元件中关闭我的标记。|2656597|不幸的是，浏览器控制台&我的代码编辑器没有给出任何指示。|2656598|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I just spared 1 hour with this message - usually easy to solve.
I got this error because I forgot to close my &lt;script&gt; tag in the parent component.
The browser console &amp; my code editor gave no indication unfortunately.

blocks|key|2656600|text|在我的例子中，我有import+{component}+from+"@/path/to/component.vue"|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2656601|将其更改为import+component+from+"@/path/to/component.vue"解决了此问题。|2656602|entityMap^0|9|1D|0|5|1B|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

In my case I had
<code>import {component} from &quot;@/path/to/component.vue&quot;</code>
Changing it to
<code>import component from &quot;@/path/to/component.vue&quot;</code>
fixed the issue.

I'm a beginner with Vue.js and I'm trying to create an app that caters my daily tasks and I ran into Vue Components. So below is what I've tried but unfortunately, it gives me this error:

<blockquote>
 vue.js:1023 [Vue warn]: Unknown custom element: - did you
 register the component correctly? For recursive components, make sure
 to provide the "name" option.
</blockquote>

Any ideas, help, please?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
 el : '#app',
 data : {
 tasks : [
 { name : "task 1", completed : false},
 { name : "task 2", completed : false},
 { name : "task 3", completed : true}
 ]
 },
 methods : {
 
 },
 computed : {
 
 },
 ready : function(){

 }

});

Vue.component('my-task',{
 template : '#task-template',
 data : function(){
 return this.tasks
 },
 props : ['task']
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;
 &lt;div v-for="task in tasks"&gt;
 &lt;my-task :task="task"&gt;&lt;/my-task&gt;
 &lt;/div&gt;
 
&lt;/div&gt;

&lt;template id="task-template"&gt;
 &lt;h1&gt;My tasks&lt;/h1&gt;
 &lt;div class=""&gt;{{ task.name }}&lt;/div&gt;
&lt;/template&gt;</code></pre>
</div>
</div>

Vue.js unknown custom element

我是Vue.js的初学者，我正在尝试创建一个应用程序来满足我的日常任务，我遇到了Vue组件。下面是我尝试过的方法，但不幸的是，它给出了这个错误： vue.js:1023 Vue警告:未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供"name“选项。有什么想法吗，请帮帮忙？​new Vue({  el ...

问Vue.js未知的自定义元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js未知的自定义元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js未知的自定义元素
EN