select demo 学习vue组件化开发

最新推荐文章于 2024-07-16 15:41:21 发布

sansis_wang

最新推荐文章于 2024-07-16 15:41:21 发布

阅读量1.2k

点赞数

分类专栏： vue-js

本文链接：https://blog.csdn.net/sansis_wang/article/details/70768450

版权

vue-js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

JS

Vue.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;

}

sansis_wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select demo 学习vue组件化开发

Vue组件化开发web中的组件是一个具有独立的逻辑和功能的界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。组件化开发的好处是，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替某个组件时，可以随时进行替换和删除，不影响整个应用的运行。Vue中的组件自定义HTML标签组件注册全局注册可以在任何模板中使用，使用之前要先注册语法使用Vue.component(组件名,选项对
复制链接

扫一扫