正文

自定义vue的组件(代码片段)

SmallCuteMonkey  SmallCuteMonkey  2023-01-16  229

关键词：

文章目录

1. 创建一个需要自定义的目录demo

2. 创建一个需要自定义的文件.vue

3. 编写文件中的内容template,script,style

4. 一定要加上router/index.js 中的路由配置否则跳转不到

demo.vue文件：

<template>
    <section> <div>
        <el-button @click="test()" type="default">TEST</el-button></div>
        <div v-loading="pageLoading" class="page-container">
            <el-form :model="queryForm" ref="queryForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="queryForm.name" placeholder="input your username"></el-input>
                </el-form-item>
            </el-form>

        </div>
        </section>
        
</template>

<script>
import BtUi from 'components/basic-ui/bontal-base-ui.umd.min.js';
const  util, cacheUtil, axios, post, get, postFile = BtUi.BtUtils;
window.Message =BtUi.Message;
window.MessageBox=BtUi.MessageBox;

// 这里是通过赋值将window对象中Message和MessageBox转换为BtUi中的message和messagebox


// 这里是vue本身组件开发的代码段。
export default 
    name: "demo",//当前组件名字
    mixins: [],
    props: ,
    created() //创建时的方法

    ,
    mounted() //绑定元素的方法


    ,
    computed: //这个 是全部加载完成的操作

    ,
    data() //初始化数据的方法
       return 
           pageLoading: false,
           queryForm: ,
           rows: [],
           total: 0,
           pageNo: 1,
           pageSize: 10,

       ; //返回一个初始化的json数据格式
    ,
    methods:

        //  test:function()
       test:function()
           window.Message("侯治聪youare so bravo");
           alert("good job");
       

    ,
    filters:


    ,
    components: 


    ,
    watch:


    


</script>

<style lang="" scoped>
    
</style>

vue-自定义组件传(代码片段)

项目中，我们经常会遇到自定义组件传值的问题，方法很多种，但是原理很简单，下述文档总结实际项目中使用的传值方式。父组件传递给子组件某一值，子组件内会修改该值，然后父组件需要获取新值?在Vue中，父子组件的关... 查看详情

vue-自定义组件传(代码片段)

npm上传自定义vue组件入门(代码片段)

...ndencies”位置然后在main.js引用，就可以直接使用我们的自定义组件了。importlccomponentsfrom‘lc-components‘Vue.use(lccomponents)首先：先用vue-cli脚手架搭建一个项目（这样的好处可以本地调试组件）vueini 查看详情

vue-自定义组件传值(代码片段)

五vue组件与props自定义属性(代码片段)

一、vue组件1.1、什么是组件化开发组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。1.2、vue中的组件化开发vue是一个支持组件化开发的前端框架。vue中规定：... 查看详情

五vue组件与props自定义属性(代码片段)

vue快速入门-2-vue框架高级操作(代码片段)

...复。-------谢谢您的参考，如有疑问，欢迎交流目录:1.自定义组件2.全局注册的自定义组件3.局部注册自定义组件4.组件的嵌套5.组件的动态切换6.Vue的ajax自定义组件就相当于自定义标签,其实底层还是html标签,只不过是套了个名字自... 查看详情

vue.js学习13elementui项目中使用自定义组件(代码片段)

Vue.js学习13ElementUI项目中使用自定义组件一、准备工作二、实现过程1.新建自定义组件的文件夹及文件2.添加dialog代码3.调用方代码一、准备工作一个现成的ElementUI项目本文目标：建立一个自定义的Dialog组件。项目有person列表... 查看详情

vue_(组件)自定义指令(代码片段)

　　Vue.js自定义指令　　传送门　　自定义指令：除了内置指令，Vue也允许用户自定义指令　　注册指令：通过全局APIVue.directive可以注册自定义指令　　自定义指令的钩子函数参数：自定义指令的钩子函... 查看详情

vue相邻自定义组件渲染错误正确的打开方式(代码片段)

话不多说看问题：当封装自定义组件时例如（自定义下拉列表）两个相同的组件在多次v-if变化时偶尔会发生渲染错误，明明赋值正确但是组建中的ajax方法可能返回的数据乱掉，或者其他神逻辑错误。经过查询发现正确的做... 查看详情

vue-cli--自定义配置全局组件(代码片段)

一、全局配置1、创建公共组件在components文件夹load中新建loading.vue和loading.js两个文件，vue文件用来写公共组件，js用来导出这个组件2、导出公共组件在loading.js中，规定了使用这个组件的名字，以及使用方法importLoadingfrom'./loadi... 查看详情

[vue]组件——通过$emit自定义组件事件(代码片段)

1.在定义组件时调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件enlarge-text： Vue.component(‘blog-post‘,props:[‘post‘],template:`<divclass="blog-post"><h3>post.title</h3><but 查看详情