精华内容
下载资源
问答
  • 1、 用小写 2、不要用html已经用了得标签 3、import test from "@/components/test.vue"; 之后在这里也要注册: components: {test} 千万注意 这个地方是 { a,b,c } 不是 [a,b,c ] ...

    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自定义组件vue自定义组件的注意事项有哪些,下面就是实战案例,一起来看一下。写一个vue组件我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目。如果还不知道怎么用webpack...

    这次给大家带来vue自定义组件,vue自定义组件的注意事项有哪些,下面就是实战案例,一起来看一下。

    写一个vue组件

    我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目。如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli。

    一个完整的vue组件会包括一下三个部分:template:模板

    js: 逻辑

    css : 样式

    每个组件都有属于自己的模板,js和样式。如果将一个页面比喻成一间房子的话,组件就是房子里的客厅、卧室、厨房、厕所。如果把厨房单独拿出来的话,组件又可以是刀、油烟机...等等。就是说页面是由组件构成的,而组件也可以是组件构成的。这样就可以非常的灵活,耦合性也非常的低。

    先来看看一个组件在不是.vue文件内的写法:Vue.component('simple-counter', {

    template: '

    data () { // 数据

    return {

    counter: 0

    }

    },

    methods: {

    // 写点方法

    },

    created () {

    // 生命钩子

    },

    computed: {

    // 计算属性

    }

    })

    template是用来干嘛的呢?

    js部分export default {

    data () {

    return {

    counter: 0

    }

    },

    methods: {

    // 方法

    },

    created () {

    // 生命钩子

    },

    computed: {

    // 计算属性

    }

    }

    // 在这里很明显js部分就是对应的原生写法内的非template部分了。

    // export default这个是es6的模块写法,不懂的可以先去了解es6的模块化

    css部分

    ...样式

    引入

    要怎么在其它组件引用该组件?

    组件一(button.vue)

    {{text}}

    export default {

    props: ['text'], // 获取父组件的传值

    data () {

    return {

    }

    },

    methods: {

    onClick () {

    console.log('点击了子组件')

    }

    }

    }

    .button {

    button {

    width: 100px;

    }

    }

    组件二(box.vue)

    import Button from './button.vue' // 引入子组件

    export default {

    components: {

    'v-button': Button

    },

    data () {

    return {

    text: '按键的name'

    }

    },

    methods: {

    }

    }

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    展开全文
  • 在学习vue自定义组件时,对比定义全局vue和自定义组件时,关于data值产生疑惑: 为什么自定义组件在利用时,data变量引用方式为函数引用 Vue.component("this",{ template:'#info', methods:{ add(){this.number++} ...

    自定义组件

    在学习vue自定义组件时,对比定义全局vue和自定义组件时,关于data值产生疑惑:
    为什么自定义组件在利用时,data变量引用方式为函数引用

    Vue.component("this",{
                    template:'#info',
                    methods:{
                        add(){this.number++}
                    },
                    data:function(){
                            return{ number:0}
                        }
                })
    

    阅读文档得知
    当多个实例引用同一个对象的时候,只要其中一个实例对该对象进行操作的话,其他实例中的数据也会发生变化;而在Vue中更多的是组件复用思想,需要每个组件都有该组件自己的数据,这样组件之间才不会相互影响干扰。因此,Vue组件中的数据不能写成对象的形式,要写成函数的形式;组件中data写成一个函数,数据以函数返回值来定义,每次组件复用的时候就会返回一个新的data,这样每个组件都有属于该组件的专有空间,各个组件有各自的数据,这样就不会干扰其他组件的运行操作。

    所以决定进行测试:

    <div id='app'>
            <this></this>
            <this></this>
            <this></this>
        </div>
    
        <template id='info'>
            <div>
            <p>{{number}}</p>
            <button @click='add'>累加器</button>
            </div>
        </template>
    

    展示效果如下:![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406150134182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODgwNTMy,size_16,color_FFFFFF,t_70

    可以得知当引用一个自定义组件时:
    每一个.vue文件都是一个组件,可以用作一个个单独的组件来进行复用,如果组件需要复用,那么组件中的data数据就一定会被复用,但是组件复用也不是单纯的在不同界面展示相同数据,所以data的属性值设置为对象的话,其中一处相同的data数据发生改变会造成全局复用的data数据跟着改变,data的属性值设置为函数的话,通过return对返回对象的复制拷贝,新建一个新的空间地址,这样就使每个实例都有单独的对象,即使发生数据改变,也只是在当前实例自己的作用域改变,不会引起其他实例的数据改变,达到实例之间不会相互影响干扰的目的

    展开全文
  • 一、Vue自定义组件 组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可...

    一、Vue自定义组件

    组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可。
    1.在项目的components里面新建一个组件
    (建议组件名字大写 防止与标签相撞)
    在这里插入图片描述
    2.在组件.vue的script里面写上name
    在这里插入图片描述
    3. 在app.vue里面导入 app.vue属于全局配置
    js中先引入组件
    在这里插入图片描述
    4.引用完一定记得有使用 不然会报错 在template里面使用一下组件
    在这里插入图片描述

    二、Vue组件组件传值

    图解:
    在这里插入图片描述

    1.父传子
    父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息。
    ①使用props建立数据通道的渠道

    // 这是父组件
    <div id="app">
    // 这是子组件
        <child message="hello" ></child>
    </div>
    

    ②在子组件中通过props传递过来的数据

    Vue,component('child',{
        props:['message'] 
    })
    

    2.子传父
    子组件可以通过 e m i t 触 发 父 组 件 的 自 定 义 事 件 。 v m . emit触发父组件的自定义事件。vm. emitvm.emit(event,arg) 用于触发当前实例上的事件;
    ①子组件中需要一个点击事件触发一个自定义事件

    <template>
      <div>
        子组件:
        <span>{{childValue}}</span>
        <!-- 定义一个子组件传值的方法 -->
        <input type="button" value="点击触发" @click="childClick">
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
      }
    </script>
    

    ②在父组件中的子标签监听该自定义事件得到传递的值

    <template>
      <div>
        父组件:
        <span>{{name}}</span>
        <br>
        <br>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
        <child v-on:childByValue="childByValue"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        },
        methods: {
          childByValue: function (childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }
    </script>
    

    3.非父子传值
    非父子组件之间传值,需要一个公共的vue来进行传递值和获取值,作为中间仓库来传值,不然路由组件之间达不到传值的效果

    展开全文
  • vue自定义组件学习

    2018-05-27 01:33:25
    Vue自定义组件,初学者尝试写vue组件过程!前端模块化组件开发
  • 1.首先创建一个自定义组件 Vue.component('test-component',{ template:`<div id="el"><input @input="change"><button @click="getInputData">点我看input数据</button></div>`, ...
  • 1.在自定义组件中调用父组件的函数 Vue.component('my-componnet',{ template:`<div @click="getF">{{]}</div>`, methods:{ getF:function(){ this.$root.f();//父函数 debugger this.$...
  • Vue自定义组件

    2020-07-23 12:47:11
    Vue自定义组件 1、在src中components中,新建Header.vue(名字可自定义)组件(首字母建议大写) 2、Header.vue内容 3、在app.vue中引用组件 第一步引入组件 import Header from './components/Header.vue' 第二步...
  • Vue 自定义组件

    千次阅读 2019-01-13 22:02:09
    @[TOC]Vue 自定义组件 什么是组件 组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用...
  • vue自定义组件: 1、在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2、Weekly.vue: 3、在app.vue中引用组件: js中先引入 // 第一步引入组件 importWeeklyfrom'./...
  • vue-03-5:vue自定义组件并在其他地方引用该组件 一、自定义一个组件 1、在src/components新建一个组件 注意事项: a、新定义的组件一定要使用template标签包裹。 b、每个自定义主键可能都有自己自定义的样式,...
  • vue自定义组件

    2019-01-20 15:41:34
    引入头部和尾部自定义组件 import header from "./header.vue"; import footer from "./footer.vue"; 在components重新自定义标签 components: { "v-header": header, "v-...
  • vue自定义组件引用的方法

    千次阅读 2019-10-10 09:38:50
    1.新建一个vue文件,写好样式后,export出去,父组件传参在props里面定义好,然后在在自组价里面使用。 如下:export default { name: 'firstTitle', ...2.父组件引用方法: <firstTitle title="通话记录...
  • 今日,怂怂就为带来一篇前端vue干货,如何在vue中创建自定义组件,并且在项目中引入自定义的组件;具有很好的参考价值,一起跟怂怂过来吧,如若对您有所帮助,别忘了在文章右上角点个赞哦。 1,在你的项目中专门...
  • 这时候我们就可以将这些重复代码封装成一个组件,以后在使用的时候只需要写上自定义组件的标签即可直接调用。 如何使用 一般用脚手架开发项目,每个 .vue单文件就是一个组件,一般都是存放在components文件夹下面 在...
  • VUE自定义组件封装

    2021-03-11 11:13:39
    VUE自定义组件封装 在开发过程中,需要重新封装一下前端框架中的组件,从而适用于自己的项目,便于重用。 这次用的前端组件库是primevue。但是这个框架的日历控件有个bug,同时使用selectionMode=“range” :...
  • vue 自定义组件 创建及其使用 1.vue 自定义组件有全局注册和局部注册两种方式; 全局注册通过 Vue.component 来创建组件,这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) ...
  • 文章目录使用意义基础使用给组件添加属性单一根元素 ...自定义组件Vue.component('标签名', {})一般我们的HTML模板和data数据以及方法之类的都会放在组件的大括号中。下面我会创建一个可以记录点击次
  • 1、在src中components中,新建Header.vue组件(首字母建议大写) 2、Header.vue 建议安装Vetur插件,输入vue可自动...3、在app.vue引用组件 注意要在需要的页面引用,这里用App.vue示例 到此组件引用完成啦 ...
  • 通过学习Vue自定义组件,可以开发一些小功能,自娱自乐,巩固学习的基础知识,本文以一个简单的拼图小游戏的例子,简述Vue自定义组件的开发,调用等基本流程,仅供学习分享使用,如有不足之处,还请指正。...
  • Vue自定义组件实现v-model(vue2和vue3)vue2实现:vue3实现: vue2实现: 1.首先要先自定义两个组件,父子关系(略) 2.在父组件中,对子组件引用:(switcher是我的一个组件) <switcher v-model="变量名">&...
  • 第一步,创建自定义组件vue <template> <div id="app"> <h1>自定义组件!</h1> </div> </template> <script> export default { name: "MyView"//通过这个名字进行...
  • 组件(Component)是 Vue.js 最强大的功能之一。...方法1全局组件用到的是 Vue.component(tagName,option),tagName是自定义组件名称,option是组件构造器。具体使用方法如下:在main.js中设置:Vue.component(...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,169
精华内容 8,067
关键字:

vue自定义组件引用

vue 订阅