精华内容
下载资源
问答
  • 自定义组件 在学习vue自定义组件时,对比定义全局vue和...为什么自定义组件在利用时,data变量引用方式为函数引用 Vue.component("this",{ template:'#info', methods:{ add(){this.number++} }, data:function(){

    自定义组件

    在学习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对返回对象的复制拷贝,新建一个新的空间地址,这样就使每个实例都有单独的对象,即使发生数据改变,也只是在当前实例自己的作用域改变,不会引起其他实例的数据改变,达到实例之间不会相互影响干扰的目的

    展开全文
  • 1.$emit 的使用 在组件中注册自定义事件 $emit(事件名, 参数) //该参数会...Vue.component('menu-cmp', { //注册prop props: { menu: Object, isActive: Boolean, menuIndex: Number }, template: ` &l..

    1.$emit 的使用

    在组件中注册自定义事件

    $emit(事件名, 参数)    //该参数会当作第一个参数传入绑定的函数中

    下面用一个菜单栏例子来说明,如下图所示

    组件

    Vue.component('menu-cmp', {
        //注册prop
        props: {
            menu: Object,
            isActive: Boolean,
            menuIndex: Number
        },
        template: `
        <div>
            <div 
                class="first-menu"
                //注册自定义事件,事件名为handle-second-menu,第二个参数则作为被绑定函数的第一个参数
                @click="$emit('handle-second-menu', {isActiev:menu.isActive,id:menuIndex})">
                {{menu.firstMenu}}
            </div>
                <div v-show="menu.isActive" class="second-menu" v-for="secondMune in menu.secondMenuList">
                {{ secondMune }}
            </div>
        </div>
        `
    })

     

    组件引用

    <div id="app">
        <menu-cmp 
            class="menu-list" 
            v-for="(menu,menuIndex) in menuList" 
            :menu='menu' 
            :menu-index='menuIndex'
            @handle-second-menu="handleSecondMenu">    //给自定义事件绑定函数
            //注:这里的事件处理为函数handleSecondMenu,如果逻辑量少,无需函数处理,那么$emit的第二个参数可以通过$event访问
        </menu-cmp>
    </div>

    Vue实例

    const vm = new Vue({
        el: '#app',
        data: {
            menuList: [
                {
                    firstMenu: '一级菜单1',
                    secondMenuList: ['二级菜单1', '二级菜单2', '二级菜单3'],
                    isActive: true,
                }, {
                    firstMenu: '一级菜单2',
                    secondMenuList: ['二级菜单1', '二级菜单2', '二级菜单3'],
                    isActive: true,
                }, {
                    firstMenu: '一级菜单3',
                    secondMenuList: ['二级菜单1', '二级菜单2', '二级菜单3'],
                    isActive: true,
                },
    
            ]
        },
        methods: {
            handleSecondMenu(res) {
                //res是$emit()的第二个参数
                this.menuList[res.id].isActive = !this.menuList[res.id].isActive
            }
        }
    })

    css

    .menu-list {
        width: 200px;
        height: 50px;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        background-color: brown;
        box-sizing: border-box;
    }
    .menu-list:not(:last-of-type) {
        border-right: 1px solid #eee;
    }
    .menu-list .first-menu {
        width: 100%;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
    }
    .menu-list .second-menu {
        width: 100%;
        height: 50px;
        line-height: 50px;
    }
    .menu-list .second-menu.active {
        display: block;
    }

    2.事件名

    不同于组件和prop:

    1. 事件名不存在任何自动化的大小写转换,而是触发的事件名需要完全匹配监听这个事件所有的名称,即如果触发一个handleMenu 事件,那么监听 handle-menu 是没有效果的;
    2. 事件名不会被当作一个JS变量名或者属性名,所以就没有理由使用大驼峰或者小驼峰式命名

    另外,v-on事件监听器在DOM模板中会被自动转换为全小写,所以@handleMenu 将会变为@handlemenu ,导致事件监听失败,因此,应当使用短横线命名法

    3.修饰符.native _ 将原生事件绑定到组件

    在组件上监听事件时,监听的是组件自动触发的自定义事件,但是在一些情况下可能想要在一个组件的根元素上直接监听一个原生事件。这时,可以用 v-on 指令的 .native 修饰符,如:

    组件

    Vue.component('my-input', {
        template:`
        <input type="text">
        `
    })

    组件引用

    <div id="app">
        <my-input @focus.native="onFocus"></my-input>
    </div>

    Vue实例

    const vm = new Vue({
        el:"#app",
        methods:{
            onFocus(){
                console.log('focus');
            }
        }
    })

    【结果】

    4.$listeners

    当<input>标签不是组件的根元素,即包裹在其他标签中时,父级的.native 监听器将静默失败。虽然不会产生报错,但是 onFocus 处理函数不会被调用。为了解决这个问题,Vue提供了一个 $listeners 属性,它是一个对象,里面包含了作用在这个组件上所有的监听器,有了这个 $linteners 属性,我们可以配合 v-on="$linteners" 将所有的事件监听器指向这个组件的某个特性的子元素,如:

    组件

    Vue.component('my-input', {
        template: `
            <label>
                姓名
                <input type="text" v-on="$listeners">
            </label>
            `
    })

    组件引用

    <my-input @focus="onFocus"></my-input>

    5.在组件上使用v-model

    由于自定义事件的出现,在组件上也可以使用 v-model 指令。

    在 input 元素上使用 v-model 指令时,相当于绑定了 value 特性以及监听了 input 事件

    <input v-model="searchText" />

    等价于

    <input
      :value="searchText"
      @input="searchText = $event.target.value"
    >

    当把 v-model 指令引用在组件上时

    <base-input v-model="searchText" /> 

    等价于

    <base-input
      :value="searchText"
      @input="searchText = $event"
    />

    同 input 元素一样,在组件上使用 v-model 指令,也是绑定了 value 特性,监听了 input 事件。所以 为了让 v-model 指令正常工作,这个组件内的<input>元素必须满足

    1. 将其 value 特性绑定到一个叫 value 的 prop 上
    2. 在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出

    组件

    Vue.component('my-input',{
        props:['value'],
        template:`
            <input :value="value" @input="$emit('input',$event.target.value)">
        `
    })

    组件引用

    <my-input v-model="searchText"></my-input>

    Vue实例

    const vm = new Vue({
        el:"#app",
        data:{
            searchText:''
        }
    })

    【结果】

    综上所述,一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不用的目的。遇到这种情况,我们可以利用 model 选项来避免冲突:

    组件

    Vue.component('my-checkbox', {
        //model选项
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            checked: Boolean
        },
        template: `
            <input 
                type="checkbox"
                :checked="checked"
                @change="$emit('change',$event.target.checked)">
        `
    })

    组件引用

    <my-checkbox v-model="isChecked"></my-checkbox>

    Vue实例

    const vm = new Vue({
        el: "#app",
        data: {
            isChecked: ''
        }
    })

    【结果】

    6. .sync修饰符(语法糖)

    除了使用 v-model 指令实现组件与外部数据的双向绑定外,还可以用 v-bind 指令的修饰符. sync 来实现

    组件

    Vue.component('my-input1',{
        props:['value'],
        template:`
            <input 
                :value="value"
                @input="$emit('update:value',$event.target.value)">
        `
    })

    组件引用

    <my-input1 :value.sync="searchText"></my-input1>

    Vue实例

    const vm = new Vue({
        el:"#app",
        data:{
            searchText:''
        }
    })

    【注】当用一个对象同时设置多个 prop 时,也可以将 .sync 修饰符和 v-bind 配合使用

    <base-input v-bind.sync="obj"></base-input>

    注意:

    1. 带有 .sync 修饰符的 v-bind 指令,只能提供想要绑定的属性名,不能和表达式一起使用,如::title.sync="1+1",这样操作是无效的
    2. 将 v-bind.sync 用在一个字面量对象上,如 v-bind.sync="{titel: 'haha'}",是无法工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。

    7.v-model VS .sync

    1. 两者都是用于实现双向数据传递的,实现方式都是语法糖,最终通过 prop + 事件 来达成目的
    2. vue 1.x 的.sync 和 v-model 是完全两个东西,vue 2,3 之后可以理解为一类特性,使用场景略有区别
    3. 当一个组件对外只暴露一个受控的状态,且都符合统一的标准时,使用 v-model 来处理; .sync 则更为灵活,凡是需要双向数据传递的,都可以使用
    展开全文
  • 感谢大家帮忙, 我第一次用vue-cli制作组件库,使用的命令是:vue-cli-service build --target lib --name vpui ./src/components/index.js项目结构:main.jsimport Vue from 'vue'/* this works */ import VPUI from...

    感谢大家帮忙, 我第一次用vue-cli制作组件库,使用的命令是:

    vue-cli-service build --target lib --name vpui ./src/components/index.js

    项目结构:

    2afb45a91cbbb2d80ac3508e8bc08036.png

    main.js

    import Vue from 'vue'

    /* this works */ import VPUI from "./components"

    /* this does not*/ import VPUI from "../dist/vpui.common.js"

    Vue.use(VPUI)

    import App from './App.vue'

    Vue.config.productionTip = false

    new Vue({

    render: h => h(App),

    }).$mount('#app')

    index.js

    import Vue from "vue"

    import VpButton from "./VpButton.vue"

    const lib = [

    VpButton

    ]

    var components = {

    install: function(Vue){

    lib.forEach((com)=>{

    Vue.component(com.name, com);

    })

    }

    }

    export default components

    生成的组件库可以发布到NPM, 也可以在其他的项目里下载安装(新建一个项目,然后npm install --save @kuanslove/vpui,就可以用里面的组件)。

    8556241ed6f8343e893118a675a88723.png

    我现在唯一不明白的地方就是:

    当我在组件库自身项目里直接引用生成的 .common.js文件时(参见main.js),总是报错:

    3d62a6e331743057780f784e22138c3f.png

    请问这是什么原因? 十分感谢

    展开全文
  • Vue组件嵌套引用

    2021-05-28 09:45:33
    Vue组件嵌套引用需求问题解决 需求 工作中难免会遇到需要在父组件中使用子组件,子组件中又需要引用组件的情况,简称“套娃引用”。一般出现场景有Menu、Nav组件。小乌龟在最近工作中遇到一种情况,组件A有个子...

    Vue中组件嵌套引用

    需求

    工作中难免会遇到需要在父组件中使用子组件,子组件中又需要引用父组件的情况,简称“套娃引用”。一般出现场景有Menu、Nav组件。小乌龟在最近工作中遇到一种情况,组件A有个子组件B,组件B回去判断当前应用依赖的应用是否已经部署,如果未部署,再打开一个组件A先部署依赖应用(套娃地狱)。

    问题

    功能逻辑都不复杂,但是当在组件B中引用组件A时,会报组件未定义或应用错误。反复检查拼写、路径是否错误,结果都没问题。想到了应该是组件嵌套引用的问题,导致Vue运行时不是知道先加载那个组件。由于import是依赖导入,组件A的运行依赖组件B,组件B的运行又依赖组件A,导致运行失败。

    解决

    父子组件,都使用异步导入

    // child.vue
    components: {
      'father': () => import('./father'),
    }
    // father.vue
    components: {
      'child': () => import('./child'),
    }
    

    也可以使用

    // child.vue
    components: {
      'father': (resolve) => require(['./father'], resolve),
    }
    // father.vue
    components: {
      'child': (resolve) => require(['./child'], resolve),
    }
    
    展开全文
  • 一般的src查找路径都需要用到"…/"等,若文件夹很多层级很深的话容易出错。 因此可以起个别名方便查找。...需要注意的是,在组件里面引用的时候,因为组件不是import导入的,所以需要在最前面加上“~”才生效 ...
  • 1、定义组件名的方式有两种: ...当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意,尽管如此,直接 在 DOM (即非字符
  • vue引入组件库Vant步骤

    2021-03-09 20:08:22
    import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 4.打开对应组件库例如tabbar,在components新建文件夹Tabbar/Tabbar <template> <van-tabbar v-model...
  • 如图:两个组件在页面上不显示 ...在App.vue中引入一个组件 App.vue <template> <div> <addition></addition> <p>--------------------</p> </div> </template&g
  • 在开发过程中,遇到了组件引用自身的情况,在此记录一下需要注意的问题。 如何引用 需要给组件设置name,然后在模板中直接引用即可。 <template> <example-component></example-component> <...
  • 方法一 <!... <... <head>...meta charset="utf-8" />...meta name="viewport" content="width=device-width, initial-scale=1...vue</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vu
  • Vue 异步组件

    2021-01-20 18:27:09
    异步组件vue 的一种新能优化的方法,比如可以运用在首屏加载等等场景。 异步组件就是组件通过 import() 函数引入,什么时候需要什么时候才加载 <!-- 父组件 --> <template> <div> <...
  • 1.app.vue局部组件引入 只需要在app.vue文件中如下编写: <template> <div id="app"> <Test/> // 1.激活Test.vue文件 </div> </template> <script> import Test from './...
  • JSP中如何引用Vue组件

    千次阅读 2021-02-23 09:33:18
    相信很多小伙伴都有接触过一些政府、国企、或者一些老的项目,而往往这些老项目不会重构,Vue是14年正式推出的,而那些老项目都是基于JQ、JS写的一些项目,其实在很久以前大部分公司都没有前端这个职位,前端在七八...
  • vue中使用组件时命名的大小写问题
  • 在这次项目中,要求不使用脚手架组件中调用组件。 实现办法,其实很简单,在index页面调用所有组件,然后在模块话中调用指定组件。 注意一定不要在组件文件中调用,不然报错 还有就是要注意组件js文件的顺序。 ...
  • 通过ref()函数还可以引用页面上的元素或组件 使用步骤: 1、在setup()中创建一个ref对象并返回它 2、在页面上为元素添加ref属性,并设置属性值与创建的ref对象的名称相同 3、当页面渲染完成后,可以通过该ref独享...
  • Vue3组件化开发(一)

    2021-06-14 15:09:00
    Vue3组件化开发(一)组件的拆分和嵌套组件的CSS作用域问题组件通信(父传子)`props`的数组用法`props`的对象用法非prop的Attribute的传递子组件有根组件包裹禁用Attribute继承子组件无根组件包裹,且有多个元素...
  • vue 父子组件渲染

    千次阅读 2020-12-19 03:56:13
    问题描述:父组件调用了一个子组件,传递了一个id的属性到子组件,但是在子组件中将这个id的props属性赋值给了data里面定义的另外一个属性myId,并且写了watch监听这个id的props。结果:第一次的时候子组件并没有...
  • 1.在app.vue页面设置高度百分百 <style lang="stylus"> #app{ height: 100%; margin: 0; padding: 0; } </style> 2.在子组件中设置height:100%;即可 具体可以参考:...
  • vue自定义组件(超详细)

    千次阅读 2020-12-23 20:17:35
    #vue自定义组件的使用方法
  • 报错Do not use built-in or reserved HTML elements as component id:修改组件的名字,例如不能使用address为组件名字组件名字不要使用内置的或保留HTML元素为组件id,App.vue是一个入口,vue必须注册才能使用2.vue...
  • 在使用Ant Design Vue 组件的时候,一般来说按需引入需要,每个组件单独引入 单独use 看起来很丑 也很麻烦 这里呢提供了一个新的操作 代码演示 /** * 该文件是为了按需加载,剔除掉了一些不需要的框架组件。 * ...
  • //子组件orderHand.vue ...// 父组件引用子组件 <order-hand ref="hand"></order-hand> 父组件中调用子组件方法 this.$refs.hand.onLower(); 这样就在父组件中调用子组件的方法了 ...
  • 本文记录了Vue 中子组件如何访问父组件数据以及vue中props的理解
  • 1.子组件内不允许直接修改父组件传过来的参数。错误实例:子组件代码直接对data参数进行修改,则会提示错误。vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be ...
  • 原标题:解析Vue全局组件和局部组件Vue组件分为两种:1. 全局组件2. 局部组件接下来我们看看两种组件的区别:一、使用范围:全局组件使用范围:可以在页面中任何位置使用局部组件使用范围:只能在定义它的el中使用...
  • vue组件库和组件文档生成

    千次阅读 2021-03-09 20:50:12
    公司现役组件库项目,公共资源或者新老项目切换仓库 ... |-- button.vue // 新增一个button组件,记得带上name |-- icon // 新增一个icon组件,记得带上name packages/index.js // 所有组件的入口 import
  • 组件传值给子组件后,子组件中对值进行加工处理,进行展示,同时子组件值是表单双向绑定的值。...示例:parent.vueimport 'Son';export default{name: 'parent',componets:{Son},data(){return{initI...
  • 思路:通过调用函数把组件实例this 传递到被应用的js文件里实例:文件结构在SendThis.vue文件中引用了modalConfig.jsimport modalConfig from './modalConfig'我们只要在modalConfig.js文件里定义个函数和一个变量...
  • 自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用。本文就粗细的介绍下,如有疑问欢迎共同讨论。在这里你能了解下如下知识点:1. 如何发布一个包到npmjs仓库上2.如何引用一个npm包,尤其是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 389,802
精华内容 155,920
关键字:

vue怎么引用组件

vue 订阅