精华内容
下载资源
问答
  • Vue 组件封装

    2020-09-17 22:16:11
    Vue 组件封装 项目中没有从零开始封装一个组件,本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点: 封装一个组件的代码组织形式; vue 组件的三大核心: 属性(props、data); 事件 ...

    Vue 组件封装

    项目中没有从零开始封装一个组件,本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点:

    封装一个组件的代码组织形式;
    vue 组件的三大核心:

    • 属性(props、data);
    • 事件
    • 插槽

    样式
    其他一些杂项

    • $nextTick 函数的使用
    • 获取 DOM 元素及在父级组件中执行子组件方法

    文件组织形式

    在组件文件夹 component 下创建一个与组件名相同的文件,文件夹内必须有 index.js,并将组件导入到该文件中,这样方便我们引用组件。

    count-to 文件夹内:

    //index.js
    import CountTo from './count-to.vue'
    export default CountTo
    

    使用组件时,只需这样引入:

    import CountTo from  "_c/count-to";// _c 是组件存放路径
    

    你封装过组件吗??
    说一下组件封装????
    你在项目中是如何封装组件的?????

    以上问题是面试官,最常问到的问题?那么你应该如何回答呢?
    

    答: 我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组件)、list(上拉加载更多功能组件))

    首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性低等问题。

    使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。但是我们一般用脚手架开发项目,每个 .vue单文件就是一个组件。在另一组件import 导入,并在components中注册,子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。

    展开全文
  • vue组件封装

    2021-04-16 19:36:28
    vue组件封装 vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 ● 有些情况下,组件也可以...

    vue组件封装

    vue组件的定义

    ● 组件(Component)是Vue.js最强大的功能之一

    ● 组件可以扩展HTML元素,封装可重用代码

    ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能

    ● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素

    ● 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周期钩子

    vue组件的功能

    1)能够把页面抽象成多个相对独立的模块

    2)实现代码重用,提高开发效率和代码质量,使得代码易于维护

    Vue组件封装过程

    ● 首先,使用Vue.extend()创建一个组件

    ● 然后,使用Vue.component()方法注册组件

    ● 接着,如果子组件需要数据,可以在props中接受定义

    ● 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用emit()方法

    展开全文
  • VUE组件封装

    2020-03-09 19:58:49
    VUE组件封装 组件封装可以直接在HTML中写上标签来实现组件的功能 HTML页面 ↓ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...

    VUE组件封装

    组件封装可以直接在HTML中写上标签来实现组件的功能

    HTML页面 ↓
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>VUE组件封装</title>
    
    </head>
    
    <body>
        <div id="seg1">
            <alert></alert>
            <alert></alert>
            <alert></alert>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
        <script src="index.js"></script>
    </body>
    
    </html>
    
    JS页面↓ 此方法封装的是全局组件在全局可以使用
    alert 就是在HTML页面使用的标签名,本文实现的是一个按钮
    // 定义全局
     Vue.component('alert', {
         template: '<button @click="on_click">弹弹弹</button>',
         methods: {
             on_click: function () {
                 alert("弹你妹");
             }
         }
     })
    var app = new Vue({
        el: '#seg1'
    })
    
    JS页面↓ 此方法封装的是局部组件在局部可以使用
    components:{ } 这是封装组件属性 在局部封装时用得到
    alert 就是在HTML页面使用的标签名,本文实现的是一个按钮
    var app = new Vue({
        el: '#seg1',
        components: {
            // 定义局部
             alert: {
                 template: '<button @click="on_click">弹弹弹</button>',
                 methods: {
                     on_click: function () {
                         alert("弹你妹");
                     }
                 }
             }
        }
    })
    

    还是感觉有点结构混乱,这次把局部定义的内容放到外面,封装成一个函数传进来

    
    // 封装方法
    //把属性直接赋值给 alert_component
    var alert_component = {
        template: '<button @click="on_click">弹弹弹</button>',
        methods: {
            on_click: function () {
                alert("弹你妹");
            }
        }
    }
    
    
    var app = new Vue({
        el: '#seg1',
        components: {
            // 封装方法 直接调用 alert_component
            alert: alert_component
        }
    })
    

    O(∩_∩)O哈哈~舒服多了

    展开全文
  • Vue组件封装

    2020-09-24 18:48:57
    我个人认为,前端开发过程中,要遵循的一点原则就是万物皆可封。就比如一个项目中,十个页面有九个都会用到Table表格,这...组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用...

     

    我个人认为,前端开发过程中,要遵循的一点原则就是万物皆可封。就比如一个项目中,十个页面有九个都会用到Table表格,这时候PM突然给你发了句,在么?恭喜你,今天准点下班是实现不了了。一个小小的改动,同样的操作你就必须去ctrl+c,ctrl+v

    假如你刚开始的时候,就把table封装成一个组件,然后多次调用,这时候可能一句代码就可以搞定PM,是不是爽歪歪

    这时候你会问了,组件是什么?

    组件(Component)是 Vue.js 最强大的功能之一。

    组件可以扩展 HTML 元素,封装可重用的代码。

    组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

    组件的注册及使用

    // 1.全局注册
    1.1 注册
    Vue.component('my-component-name', {  // ... 选项 ... })
    //全局注册的组件可以用在任何新创建的跟实例模板中
    // 组件名称支持短横杠和首字母大写两种方式,使用的时候两种方法也都支持
    
    1.2使用(两种命名均支持)
    <my-component-name />
    <MyComponentName />
    
    // 2.局部注册
    2.1 注册
    import MyComponentName from './MyComponentName';
    components: {
        MyComponentName
    }
    
    2.2使用同1.2
    

    组件传参之父传子

    <!-- 父组件 -->
    <template>
        <div>
            <my-child :parentMsg="parentMsg"></my-child>
        </div>
    </template>
    
    <script>
        import MyChild from './MyChild'
    
        export default {
            components: {
                MyChild
            },
            data() {
                return {
                    parentMsg: "我是来自父组件的消息"
                }
            }
        }
    </script>
    
    <!-- 子组件 -->
    <template>
        <div>
            <span>{{ parentMsg }}</span> // parentMsg = 我是来自父组件的消息
        </div>
    </template>
    
    <script>
        export default {
            props: {
                parentMsg: {
                    type: String,
                    default: '默认显示的信息'
                }
            }
        }
    </script>

    组件传参之子传父

    <!-- 父组件 -->
    <template>
        <div>
            <my-child @change="childChange"></my-child>
        </div>
    </template>
    
    <script>
        import MyChild from './MyChild'
    
        export default {
            components: {
                MyChild
            },
            methods: {
                childChange(e) {
                    console.log(e); // 子组件触发了change
                }
            }
        }
    </script>
    
    <!-- 子组件 -->
    <script>
        export default {
            create() {
                this.$emit('change', '子组件触发了change');
            }
        }
    </script>

    其实,组件的原理特别的简单,最重要的是养成习惯,看项目页面的时候就预先把组件给封装起来,还有就是有一个思想,假如你是使用者,你希望怎么去传参更爽一点。先从使用的角度去规划,随后再去封装。 

    展开全文
  • vue 组件封装

    2018-08-27 13:30:36
    把我们所需要的功能写在一个组件里面 比如 /*popout*/ 1:在components里面创建文件夹popout 以及index.js和popout,vue 2:在index,js里面去导出popout.vue import Popout from "./popout.vue"; ...
  • Vue组件封装的过程

    千次阅读 多人点赞 2020-09-09 18:02:16
    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 某些情况下,组件也可以...
  • Vue组件封装指南

    2019-05-05 20:21:16
    Vue组件封装指南
  • 使用Vue组件封装Echart柱状图,直接引用组件js,并且在需要展示的地方,进行Vue数据传值,支持多坐标轴。本案例非Webpack打包,直接引用JS即可。适用于部分页面使用Vue功能,或者想尝试Vue功能的同学。该组件使用...
  • 主要介绍了Vue 组件封装 并使用 NPM 发布的教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 代码热加载、webpack打包,weex原生调用,vue组件封装,weex内置组件使用
  • VUE组件封装左侧垂直导航三级菜单,整个百度上都没有封装好的三级菜单写法,我自己写了一套,可以作为参考,界面很美观。
  • vue组件封装】ECharts组件封装随笔

    万次阅读 2020-09-05 20:18:11
    内容 记录组件封装思路 实现ECharts 组件的封装
  • Vue组件封装,(面试回答)

    千次阅读 2020-09-17 21:53:12
    在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和...vue组件封装的优点 组件(Component)是Vue.js最强大的功能之一.
  • Vue组件封装 - Tab标签滑动切换 Root_030 VUE+TS 效果 第二版 简单封装Tab标签滑动切换组件,即贴即用,后续会继续改进。 <template> <div class="tab-container" v-if="tabList"> ...
  • vue组件封装说明

    2020-04-17 12:51:31
    组件封装 npm install npm run serve npm run build 一 通用组件 通用组件:即为在各个页面均能使用的公共组件,例如navbar、input、button等 封装 button 如下: 新建 src / components / button 文件夹,内含 ...
  • Vue 组件封装之 ScrollView 上拉加载更多一、ScrollView 上拉加载更多二、使用案例三、API 使用指南四、源代码 一、ScrollView 上拉加载更多 组件说明: 实现上拉到底部加载更多功能。 效果展示: 当滑动到底部超过...
  • 这里提供两种vue封装共用组件的方法 方法一: main.js中 import ListItem from './components/list.vue'//封装共用组件方法一 Vue.component('ListItem',ListItem) 方法二: 新建vue文件的时候再建个相应的js...
  • vue组件封装极简实例

    2019-11-25 17:25:34
    props对象中的数据,我们可以直接在当前组件中使用 this.searchList,可以直接使用。这里要强调一下,props传过来的数据只做展示,不得修改,想修改,再新写一个data中的变量承接做数据的再处理。至于原因,同上,...
  • vue组件封装指南

    千次阅读 2019-04-30 13:35:04
    vue组件三要素 props参数 slot定制插槽 event自定义事件 基本用法 在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 template 中写好 HTML 代码,一个简单的组件就完成了 一...
  • Vue 组件封装之 Tab 切换

    千次阅读 2019-07-25 17:22:27
    实战 Vue 第5天:封装一个tab切换组件前言使用现存组件面临的问题封装 tab 组件的思路封装 tab 组件代码总结 前言 以上 tab 切换功能在前端开发中司空见惯。各种现存的组件也随手拈来。在 Vue 中,有配套的 element-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,350
精华内容 3,740
关键字:

vue组件封装

vue 订阅