zoukankan      html  css  js  c++  java
  • Vue入门之旅:一报错 Unknown ... make sure to provide the "name" option及error compiling template

    报错一: Unknown custom element: <custom-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option

    代码:

    html

    <custom-select v-bind:list="list2"></custom-select>

    js

    new Vue({
        el: "#app",
        data:{
            list1: [{"name":"beijing"}, {"name" : "hangzhou" }],
            list2: ["2017-1-1", "2017-3-3"]
        }
    });
    //<li class="match-list-li">'+value.name+'</li>
    Vue.component("custom-select", {
        data: function(){
            return {
                selectShow : false,
                val: ""    
            };
        },
        props: ["list"],
        template: `
                <input type="text" class="form-control" placeholder='press "enter" to match the Employee'
                 @click="selectShow = !selectShow"    
                 :value="val">    
             
                  <match-list v-show="selectShow"
                               :list="list"
                              v-on:received="changeValueHandler"
                   ></match-list>  
              
                
            `,
        methods : {
            //v-on:received 订阅事件
            changeValueHandler(value){
                this.val = value;
    
            }
        }
    });
    //child
    Vue.component("match-list", {
        props: ["list"],
        template: `
                <ul class="repo-admin-match">
                    <li class="match-list-li" v-for="item of list" @click="changeValueHandler(item)">{{item}}</li>
                </ul>
            `,
        methods : {
            changeValueHandler : function(name){
                //在子组件中有交互
                //告知父级 改变val 需发出一个自定义事件
                this.$emit("received", name);
            }
        }
    });

    报错原因:

    先新建了Vue(new Vue),然后注册组件(Vue.component) 。把顺序颠倒一下即可解决

    ------------------------------------

    报错2:error compiling template

    这个一般是写的不符合规范,不能被编译

    --Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.大意应该是Component template应该包含一个确切存在的根元素

    所以 我用<section class="wrap"></wrap>包裹起来

  • 相关阅读:
    ngRoute AngularJs自带的路由
    AngularJs $resource 高大上的数据交互
    AngularJs filter 过滤器
    eBPF监控工具bcc系列一启航
    [转载] kprobe原理解析(一)
    c++通过CMake实现debug开关
    如何使用fio模拟线上环境
    汇编学习pushl, popl
    block:cfq 学习02
    阻抗匹配详细讲解(以前的转贴)
  • 原文地址:https://www.cnblogs.com/zyjzz/p/7260006.html
Copyright © 2011-2022 走看看