select demo 学习vue组件化开发

来源：互联网发布：传承家谱软件编辑：程序博客网时间：2024/05/17 11:36

Vue组件化开发

web中的组件是一个具有独立的逻辑和功能的界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。
组件化开发的好处是，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替某个组件时，可以随时进行替换和删除，不影响整个应用的运行。

Vue中的组件

自定义HTML标签

组件注册

全局注册

可以在任何模板中使用，使用之前要先注册

语法

使用Vue.component(组件名,选项对象)，组件名命名约定camelCase和kebab-case。在html中使用组件：使用kebab-case命名法

局部注册

在组件实例中通过选项对象注册，只在所注册的作用域中使用

{    components:{        组件名：选项对象    }}

不符合W3C标准时的用法

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

不推荐使用，哈哈

组件的通信

同个组件间的通信

在组件上使用自定义属性绑定数据，在组件中需要显式的用props声明自定义属性名。

HTML<div style="float: left;">    <h2>自定义下拉框</h2>    <custom-select btn-value="查询"></custom-select></div><div style="float: left;">    <h2>自定义下拉框2</h2>    <custom-select btn-value="搜索"></custom-select></div>

JSVue.component("custom-select",{    props:["btnValue"],    template:`<section class="wrap">                <div class="searchIpt clearFix">                    <div class="clearFix">                        <input type="text" class="keyWord" value="" />                        <input type="button" :value="btnValue" />                        <span></span>                    </div>                </div>            </section>`})

组件可以有自己的data，但是它必须是函数，且组件不能共用一个data对象，因为这样如果更改一个组件数据会影响其他组件。如果是函数的话，每个组件都有自己的独立数据，相互之间不会影响。

父组件->子组件的通信

一个组件里嵌套另一个组件，那么外面的是父组件，里面的是子组件。而在HTML里的叫根组件。

组件实例的作用域是孤立的，不能在子组件直接用父组件的数据。

这样使用

//根组件中用v-bind绑定数据<div id="app">    <custom-select btn-value="查询" v-bind:list="list1"></custom-select>    <custom-select btn-value="搜索" v-bind:list="list2"></custom-select></div>//父组件中继续这样绑定...省略代码<custom-list :list="list"></custom-list>...//子组件中写法如下Vue.component("custom-list",{            props:["list"],            template:`<ul class="list">                            <li v-for="item in list" @click="selectValueHandle">{{item}}                            </li>                      </ul>`            }})//vue实例中代理数据new Vue({    el:"#app",    data:{        list1:['北京','上海','广州','杭州'],        list2:[’17-01-11’,’17-02-11’,’17-03-11’,’17-04-11’],    }})

子组件->父组件的通信

需要用到自定义事件，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。

这里我不举例了，跟着老师做了一个select的demo，可以去我的github查看，里面用到了这里提到的所有方法。

select

贴一下代码吧

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>select组件</title>    <link rel="stylesheet" type="text/css" href="select.css"></head><script src="vue.js"></script><body>    <div id="app">        <div style="float: left;">            <h2>自定义下拉框</h2>            <custom-select btn-value="查询" v-bind:list="list1"></custom-select>        </div>        <div style="float: left;">            <h2>自定义下拉框2</h2>            <custom-select btn-value="搜索" v-bind:list="list2"></custom-select>        </div>    </div>    <div id="app1">        <custom-select></custom-select>    </div>    <script>        Vue.component("custom-select",{            data(){                return {                    selectShow:false,                    val:""                }            },            props:["btnValue","list"],            template:`<section class="wrap">                        <div class="searchIpt clearFix">                            <div class="clearFix">                                <input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />                                <input type="button" :value="btnValue" />                                <span></span>                            </div>                            <custom-list                                 v-show="selectShow"                                 :list="list"                                 v-on:receive="changeValueHandle"                            >                            </custom-list>                        </div>                      </section>`,            methods:{                changeValueHandle(value){                    this.val = value;                }            }        });        Vue.component("custom-list",{            props:["list"],            template:`<ul class="list">                            <li v-for="item in list" @click="selectValueHandle(item)">{{item}}                            </li>                      </ul>`,            methods:{                selectValueHandle:function(item){                    this.$emit("receive",item)                }            }        })        new Vue({            el:"#app",            data:{                list1:['北京','上海','广州','杭州'],                list2:['17-01-11','17-02-11','17-03-11','17-04-11'],            }        })    </script></body></html>

CSS

*{    padding: 0;    margin: 0;}ul,li {    list-style: none;}li {    line-height: 2em;}li:hover {    background-color: #f9f9f9;    border-radius:5px;    cursor: pointer;}input{    cursor:pointer;    outline:none;}#app {    margin-top: 20px;}#app h2 {    text-align: center;}.wrap {    background-color: rgba(56, 170, 214, 0.45);    border-radius: 20px;    width: 300px;    margin: 40px;    padding: 20px;}input[type="button"] {    font-size:14px;    margin-left:2px;    padding:2px 5px;    background-color:rgb(228, 33, 33);    color:white;    border:1px solid rgb(228, 33, 33);    border-radius:5px;}.clearFix {    padding-left:}input.keyWord {    border: 1px solid #777777;    border-radius: 10px;    height: 30px;    width: 80%;    padding-left: 10px;    font-size: 16px;}ul.list {    margin: 20px 0;}ul.list li {    padding: 10px 0 0 10px;}

0 0