七.Vue.js自定义组件 - 组件创建及使用

最新推荐文章于 2023-02-08 19:36:23 发布

小虫信息科技

最新推荐文章于 2023-02-08 19:36:23 发布

阅读量594

点赞数

分类专栏： vue2.0 文章标签： vue组件自定义组件全局组件局部组件动态组件

本文链接：https://blog.csdn.net/lml_little/article/details/116804101

版权

vue2.0 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

什么是组件？组件能把页面分成独立的模块，实现代码重用，提高开发效率和代码质量，使得代码易于维护。

Vue.js 组件分为全局组件、局部组件、动态组件，父子关系的组件数据交互用props，子组件向父组件的数据传递，使用 $emit

1. 全局组件，通过 Vue.component() 去注册全局组件

Vue.component('组件名称'，配置参数对象)，使用方式

<!DOCTYPE html>
<html>
    <body>
        <div id="app1">
            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
            <my-component message="message"></my-component>
        </div>
        <div id="app2">
            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
            <my-component message="message"></my-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 方式一：注册组件，传入一个扩展过的构造器
        Vue.component('my-component', Vue.extend({ 
            template: '<p>{{lastName}} {{firstName}} {{message}}</p>',
            props:["message"],
            data: function () {
                return {
                  firstName: 'xiaochong',
                  lastName: 'li'
                }
             }
         }));
         // 方式二：传入一个选项对象 (自动调用 Vue.extend)
         Vue.component('my-component', { 
            template: '<p>{{lastName}} {{firstName}} {{message}}</p>',
            props:["message"],
            data: function () {
                return {
                  firstName: 'xiaochong',
                  lastName: 'li'
                }
             }
         });

        // 使用组件，组件应该挂载到某个Vue实例下，否则它不会生效。
        var app1 =  new Vue({
             el: '#app1',
             data: {
                message: '你好！一起学习组件'
             }
         });

         /*定义vue实例app2*/
        var app2 = new Vue({
            el: '#app2',
            data: {
                message: '你好！我也能用全局组件'
             }
        });

        
    </script>
</html>


// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

2. 局部组件，通过在 new Vue 添加components属性配置。完成局部组件注册

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <!-- my-component只能在#app下使用-->
            <my-component></my-component>
        </div>
        <div id="app2">
            <!-- app2并未注册组件，不能使用-->
            <my-component></my-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>局部组件!</div>'
        });
        
        var app = new Vue({
            el: '#app',
            components: {
                // 2. 将myComponent组件注册到Vue实例下
                'my-component' : myComponent
            }
        });
        var app2 = new Vue({
            el: '#app2'
        });
    </script>
</html>

3. 动态组件，通过<component></component>标签和 is 属性切换实现，动态组件结合<keep-alive></keep-alive>完成组件缓存，即保留用户的筛选（或选中）状态

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <button @click="selectName='my-component-A'">菜单1</button>
            <button @click="selectName='my-component-B'">菜单2</button>
            <button @click="selectName='my-component-C'">菜单3</button>
            <keep-alive include="my-component-A"><!--只有a的值被缓存了-->           
                <component :is="selectName"></component>
            </keep-alive>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>局部组件!</div>'
        });
        
        var app = new Vue({
            el: '#app',
            data: {
                selectName: 'my-component-A'
            },
            components: {
                'my-component-A' : {
                    template:'<h1>菜单1内容</h1>'
                },
                'my-component-B' : {
                    template:'<h1>菜单2内容</h1>'
                },
                'my-component-c' : {
                    template:'<h1>菜单3内容</h1>'
                },
            }
        });
        var app2 = new Vue({
            el: '#app2'
        });
    </script>
</html>

<keep-alive></keep-alive>

keep-alive应用场景：列表界面通过筛选条件，筛选出一批数据，点击数据进入详情后再返回列表界面，列表可以保持进入详情前的数据。

keep-alive属性设置有：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。include="my-component-A"、:include="[my-component-A,my-component-B]"

exclude - 字符串或正则表达式。名称匹配的组件都不会被缓存，用法和 include 一样

max - 数字。最多可以缓存多少组件实例。

小虫信息科技

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
七.Vue.js自定义组件 - 组件创建及使用

什么是组件？组件能把页面分成独立的模块，实现代码重用，提高开发效率和代码质量，使得代码易于维护。Vue.js 组件分为全局组件、局部组件、动态组件1. 全局组件，通过Vue.component()去注册全局组件Vue.component('组件名称'，配置参数对象)，使用方式<!DOCTYPE html><html> <body> <div id="app1"> <!-- 3. #...
复制链接

扫一扫