vue 静态页面组件注册

请看这篇文章 http://blog.csdn.net/oak160/article/details/64920361

组件标签

 

<custom-select btn="查询" v-bind:list="list1"></custom-select>

 

用 is 把组件插入不标准标签

 

<table is="custom-select"></table>

props传数据

 

  组件内的数据必须是函数声明：

  例子

  data:function (){

  return name:obj.data

 }

 

 return 作用就是吧对象重新赋值，相当于赋值一样，给了name, 通俗一些就是 把obj.data 复制给了name:obj

 

例子

 

html:

 

<div id="app">

            <div style="float: left;">

                <h2>自定义的下拉框</h2>

                <custom-select btn="查询" v-bind:list="list1"></custom-select>

            </div>

            <div style="float:left;">

                <h2>自定义的下拉框2</h2>

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

            </div>

        </div>

 

 

//注册组件

            Vue.component("custom-select",{

                data:function(){

                    return {

                        selectShow:false,

                        val:""

                    };

                },

                props:["btn","list"],

                template:`<section class="warp">

                    <div class="searchIpt clearFix">

                        <div class="clearFix">

                            <input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />

                            <input type="button" :value="btn">

                            <span></span>

                        </div>

                        <custom-list

                            v-show="selectShow"

                            :list="list"

                            v-on:receive="changeValueHandle"

                        ></custom-list>

                    </div>

                </section>`,

                methods:{

                    changeValueHandle(value){

                        //alert("我被触发了,值为："+value);

                        this.val = value;

                    }

                }

            })

            Vue.component("custom-list",{

                props:["list"],

                template:`<ul class="list">

                            <li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>

                        </ul>`,

                methods:{

                    selectValueHandle:function(item){

                        //在子组件中有交互

                        //告知父级，改变val的值，需要出发一个自定义事件

                        this.$emit("receive",item);

                    }

                }

            })

转载于:https://www.cnblogs.com/blccy/p/8214864.html