精华内容
下载资源
问答
  • vue自定义组件引用
    千次阅读
    2020-05-06 17:45:40

    1、 用小写

    2、不要用html已经用了得标签

    3、import test from "@/components/test.vue";

        之后在这里也要注册:

         components: {test}

        千万注意  这个地方是 { a,b,c }  不是  [a,b,c ]

     

    4、动态组件 <component v-bind:is="get_com" :state="state"></component>

         似乎有状态保持,修改后需要刷新一下,才能看到改变

     

    5、居然还有个太坑爹的问题,变量居然不能以下划线开头

    data() {
    
    return {
    
    _abc:{total:128},
    
    }
    
    }

    _abc 必须改成  abc才能正常渲染

    更多相关内容
  • Vue 自定义组件

    千次阅读 2022-03-13 14:54:55
    Vue 自定义组件与使用 1. 初识组件   组件:如果项目中多次用到类似的效果,就可以把这个效果进行自定义组件。新建项目后默认存在 HelloWorld.vue 就是一个组件,组件必须导入之后才能使用,其中 HelloWorld 为...

    Vue 自定义组件与使用

    1. 初识组件

      组件:如果项目中多次用到类似的效果,就可以把这个效果进行自定义组件。新建项目后默认存在 HelloWorld.vue 就是一个组件,组件必须导入之后才能使用,其中 HelloWorld 为自定义名称,通过这个名称就可以调用对应组件。

      components:组件文件只导入是不能被调用的,还必须在 components 中注册组件,注册后在 <template> 中就可以通过组件名直接引用组件了。在 <template> 中组件以标签形式存在,标签名为组件名。其中 msg 是在 HelloWorld 中定义的 props 参数,表示需要传递给组件的数据。

    定义组件 HelloWorld.vue

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String  //给组件传递的参数类型
      }
    }
    </script>
    

    2. 自定义组件

    1、在 src/components 目录下新建一个名称为 MyComponent.vue 的组件;

    2、编写组件的内容;

    <template>
        <div>
            <div>这是一个自定义组件</div>
            <div>{{msg}}</div>
        </div>
    </template>
    
    <script>
        export default {
            name: "MyComponent",
            props: {
                msg: String
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    

    其中,props 定义组件传递的参数名称和参数类型,{{msg}} 则获取组件接收到的参数值。

    3、修改 App.vue,使用自定义组件;

    首先通过 import 导入组件并设置名称为 MyComponent,然后在 components 中声明或注册组件,最后传递必要的参数,使用组件 <MyComponent></MyComponent>

    <template>
        <div id="app">
            <!--3.传递参数,使用组件-->
           <MyComponent msg="你好!欢迎来到我的Vue App."></MyComponent>
        </div>
    </template>
    
    <script>
        // 1.导入组件
        import MyComponent from "./components/MyComponent"
        export default {
            name: 'App',
            components: {
                //2.声明或注册组件
                MyComponent
            }
        }
    </script>
    

    3. 组件参数传递

    组件传递参数的类型:String、Number、Boolean、Array 和 Object 等。当传递数值类型时,必须使用 v-bind 指令进行设置,此时的参数表示一个表达式而不是一个字符串。

    3.1 定义参数

    <template>
        <div>
            <div>大家好!我的名字是{{name}},年龄为{{age}}岁.</div>
            <div>学号:{{stu.No}}</div>
            <div>学校:{{stu.schoolName}}</div>
            <div>专业:{{stu.majorName}}</div>
        </div>
    </template>
    
    <script>
        export default {
            name: "MyComponent",
            props: {
                name: String,
                age: Number,
                stu: Object
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    

    3.2 接收参数并绑定

    <template>
        <div id="app">
            <!--3.传递参数(字符串、数字、对象),使用组件-->
           <MyComponent name="张三" v-bind:age="15" v-bind:stu="school"></MyComponent>
        </div>
    </template>
    
    <script>
        // 1.导入组件
        import MyComponent from "./components/MyComponent"
        export default {
            name: 'App',
            components: {
                //2.声明或注册组件
                MyComponent
            },
            data(){
                return{
                    school:{
                        No: 123123,
                        schoolName: "湖北大学",
                        majorName: "软件工程"
                    }
                }
            }
        }
    </script>
    

    注:如果直接使用 age=15 进行传参效果依然可以实现,但是会在浏览器出现错误,提示要一个 15 的参数值,但是发现传递的是”15”。所以在向组件传递除 String 以外的类型时,都通过 v-bind 进行参数的绑定。

    组件和页面的区别:

    组件和页面文件中内容是完全相同的,唯一的区别是组件可能被多次使用,import 时会给组件定义个名称,而页面文件可能只使用一次,import 时就不需要定义名称。在项目中为了区分页面和组件,把组件放在 components 文件夹下,而页面则放在 pages 或 views 文件夹下。

    展开全文
  • vue自定义组件

    千次阅读 2022-02-13 20:55:15
    使用组件的好处 组件是可以复用性的 易于维护 有封装性,易用于使用 大型项目中降低组件之间复用性 全局组件 引用全局组件 my-header

    一般在项目src中创建一个components文件夹存放我们自定义的组件,在需要的页面直接使用

    1.第一步:在页面中引入子组件,(假设在components文件下有一个myHeader.vue组件)
    import myHeader from '@/components/myHeader.vue'
    2.第二步:注册子组件
    components:{
    	myHeader
    }
    3.第三步:作为标签使用
    <myHeader />
    或者
    <myHeader></myHeader>
    

    使用组件的好处

    • 组件是可以复用性的
    • 易于维护
    • 有封装性,易用于使用
    • 大型项目中降低组件之间复用

    全局组件

    组件分为:全局组件和局部组件
    全局组件在main.js中直接使用Vue.component

    import Loading from '@/components/myLoading.vue'
    Vue.component('loading',Loading)
    

    局部组件

    <script>
    import Loading from '@/components/myLoading.vue'
    export default {
    	data() {
    		return {}
    	},
    	components:{
    		Loading,
    	}	
    }
    </script>
    

    组件之间的通讯方式

    父传子

    在父组件的子组件标签上绑定一个自定义属性,挂在要传输的变量,在子组件上通过props来接收,props可以是数组也可以是对象

    子传父

    在父组件的子组件上绑定一个自定义事件,接收子组件传递过来的事件,子组件通过$emit 触发父组件上的自定义事件,发送参数

    兄弟之间

    通过在main.js中初始化一个全局的$bus,在发送事件的一方通过$bus.$emit('事件名',传递的参数信息)发送,在接收事件的一方通过bus.$on('事件名,参数')接收传递的事件

    组件样式穿透

    为了让组件中的样式不影响其他组件的样式,只在当前组件起作用,我们会加上scoped

    <style lang ='scss'></style>
    

    有时候我们想让某个样式影响子组件,这时候我们可以使用操作符

    css中
    <style scoped>
    	>>> .active {}
    </style>
    sass中
    <style lang='scss' scoped>
    	/deep/ .active {}
    </style>
    
    展开全文
  • Vue自定义组件并引入

    千次阅读 2022-01-16 18:19:56
    今天,bug菌为大家带来一期帝王级干货,有关于前端vue组件教学,深入指引大家在vue中如何创建自定义组件,并且在vue中引入你自定义组件;       具有很好的教学价值,希望小伙伴们根据这篇...

          今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件;

          具有很好的教学价值,希望小伙伴们根据这篇文章可以有所收获,建议小伙伴们先收藏后阅读哦。

          小伙伴们如果觉得文章不错,点赞、收藏、评论,分享走一起呀,记得给bug菌来个一键三连~~

          好了,我们开始这期的正文吧。

    #1、在你的项目中专门创建一个放置自定义组件的文件夹(我是放在了components底下的common中,分类好日后方便维护,本文以table.vue为例)

    #2、在你要添加的页中加入要引入的模块,注意驼峰命名的方式(本文为例:<v-table></v-table>,因为我在定义table模块的时候定义了name:v-table,所以引用的时候,也必须得用所在table模块中name定义好的名字);

    #3、在index.vue中引入table.vue模块 ;如下:

    
        
    1. //index.vue 页面 ,引入v-table模块
    2. <div class= "table">
    3. <v-table></v-table> //这就是你引入的自定义模块;注意是驼峰命名法
    4. </div>

    #4、在index.vue页面引入该组件(注意:table.vue,我是在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件)

    
        
    1. //index.vue
    2. <script>
    3. import vTable from '../../components/common/table' //table.vue(注意,我在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件)
    4. export default {
    5. name: "index",
    6. components: {
    7. vTable
    8. },
    9. }
    10. </script>

    ps:说白了,自定义组件就好比封装,把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。

    #5、另外,为了防止在同一页面写入过多的代码,不方便后期维护,便可以把整个页面分成多个小模块,然后在主页面进行模块引入,创建包括引入步骤都是一样的。

    比如:

    总结:

    vue组件命名问题:

    1、别用驼峰式命名 因为 vue   webpack编译后 ,他统一会变成小写(顾名思义:骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起,而构成的唯一识别字时,第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母,例如:myFirstName、myLastName,这就叫驼峰命名;你们学会了吗)

    2、组件命名最好加个前缀 比如    <v-table></v-table>或者<v_table></v_table>


    ❤如果文章对您有所帮助,就请在文章末尾的左下角把大拇指点亮吧!(#^.^#);

    ❤如果喜欢bug菌分享的文章,就请给bug菌点个关注吧!(๑′ᴗ‵๑)づ╭❤~;

    ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号:708072830】;

    ❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复参与讨论(请勿发表攻击言论,谢谢);

    ❤版权声明:本文为博主原创文章,转载请附上原文出处链接和本文声明,版权所有,盗版必究!(*^▽^*).

    </article>
    
    展开全文
  • vue 引入自定义组件失效

    千次阅读 2021-06-23 11:31:48
    删除原有components,引入的时候,让它自动生成一份,还没搞懂什么原理,记录一下,有空研究
  • Vue页面中引用自定义组件

    千次阅读 2019-07-22 17:53:20
    比如我想引用一个外部的头部导航的组件,因为这个导航在很多地方都用到,避免每个页面都写一遍 首先 我先在components这里创建一个navmenu的组件 这里是组件的内容,引用了element ui <template> <el-tabs...
  • vue自定义组件中再嵌套其他组件

    千次阅读 2022-03-12 16:28:47
    这样就提出了题目描述的需求:如何实现自定义组件中再嵌套其他组件。俄罗斯套娃。 实现起来十分简单。就是在方框组件(即容器组件)中放置一个插槽(slot)。 1、容器组件(Block.vue) <template> <
  • 将一个自定义组件定义为map以后页面不显示 import map from './map.vue' 下面使用组件模板中 components: { bread, quillEditor, map }, 页面中使用的是 <map></map> 页面上一直不显示,后来...
  • Vue自定义组件 引入组件 首先在项目内的components新建.vue文件。 创建完成之后搭建完整的框架。其实就是新建组件,在此之前,需要在VScode中引入一个插件(vue 2 snippets),这个插件会让我们在打代码的时候少...
  • vue 自定义组件 创建及其使用 1.vue 自定义组件有全局注册和局部注册两种方式; 全局注册通过 Vue.component 来创建组件,这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) ...
  • 在input.vue中写入所封装的组件内容,并在本地项目中能使用 测试项目能否使用组件 // 谁用是引用 import Input from "@/components/Input"; 在input文件夹里的 index.js 中定义组件名称并暴露出去 // 导入定义...
  • vue自定义组件: 1、在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2、Weekly.vue: 3、在app.vue中引用组件: js中先引入 // 第一步引入组件 importWeeklyfrom'./...
  • 自定义组件 1.新建组件 在src中components中,新建Header.vue组件(首字母建议大写) 2.组件使用过程 在App.vue: // 第一步引入组件 import HelloWorld from './components/HelloWorld.vue' // 第二步在export ...
  • VUE自定义组件data引用方式的理解

    千次阅读 2021-04-06 14:58:31
    在学习vue自定义组件时,对比定义全局vue和自定义组件时,关于data值产生疑惑: 为什么自定义组件在利用时,data变量引用方式为函数引用 Vue.component("this",{ template:'#info', methods:{ add(){this.number++} ...
  • 五一假期结束了,我是痴心阿文,你们的学友哥,今天给大家分享uniapp基于vue自定义组件
  • vue 自定义组件npm上传

    2022-07-28 10:14:05
    第四步npmaddcddp-ui/npmupdatecddp-ui下载或更新自己创建得组件库cddp-ui。第三步npmpublish发布到自己得npm账户。第二步npmlogin登录自己的npm账户。第一步创建自己的npm账户。
  • 2.在components下新建index.js文件(和自定义组件放在一个文件里,比较好找一点),用来暴露组件 //导入刚刚定义的组件 import Table from './table.vue' //初始化 const table = { install: function (Vue) { //...
  • vue自定义组件引用的方法

    千次阅读 2019-10-10 09:38:50
    1.新建一个vue文件,写好样式后,export出去,父组件传参在props里面定义好,然后在在自组价里面使用。 如下:export default { name: 'firstTitle', ...2.父组件引用方法: <firstTitle title="通话记录...
  • Vue自定义组件与Vue组件组件传值

    千次阅读 2020-07-23 22:08:25
    一、Vue自定义组件 组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可...
  • vue3自定义组件

    2022-08-01 10:47:00
    vue3自定义组件
  • vue自定义组件实现双向绑定

    千次阅读 2020-12-22 12:23:59
    今天,我们通过另一种方式实现交互,参考input框的v-model,实现自定义组件的双向数据绑定。 即:父组件值改变,子组件的值跟着改变;反之,子组件值发生变化,父组件值随之变化 子组件定义: 由于不能直接修改...
  • 这是一个自定义组件!</div> </template> <script> module.exports = { //注意这里要用module.exports,不能用export default,不然可能会出问题 data(){ return {} } } </script> <...
  • vue自定义select组件

    2022-05-19 17:18:37
    SelectBar组件 <template> <div class="m-select-wrap"> <input :class="['u-select-input f16', color === 'blue' ? '' : 'white-color']" type="text" readonly @click="openSelect" @blur=...
  • Vue.js自定义组件的使用

    千次阅读 2022-04-02 16:15:08
    Vue.js公共组件的使用
  • vue自定义递归组件

    2021-03-23 11:19:36
    自定义树形结构的组件时,如果数据嵌套层数未知(即父若有子,子又有孙,子子孙孙无穷尽也),此时就可以使用递归的方式定义组件。如多级菜单,树形列表等。 递归组件模板在定义时时,需要注意:一定要写终止条件...
  • vue教程4:自定义组件的使用

    千次阅读 2020-09-15 15:52:42
    概述 vue组件是一个可复用的
  • 在使用自定义组件的时候,经常需要进行组件的传值,下面介绍,父组件给子组件进行传值: 父组件: <el-tab-pane label="高数上册(工)练习册" > <notes-list :msg="classId"></notes-list> </...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,069
精华内容 10,827
关键字:

vue自定义组件引用