vue使用中一些坑整理（componet等）

最新推荐文章于 2024-09-11 10:10:06 发布

原创最新推荐文章于 2024-09-11 10:10:06 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue使用中的一些坑

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue-js

1 篇文章

订阅专栏

本文总结了Vue使用中的关键点，包括如何在组件外调用组件数据和方法，实现自动加载并切换组件，以及Vue实例与组件间的数据双向绑定和传递。通过v-bind和props实现父向子传递，利用$emit进行子向父的通信，并强调了避免直接操作DOM的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建组件

var aaa = Vue.component('labelSearch', {
    template: '<div>3333333333333333444</div>',
    data: function () {
        return {
            labelname: '1234',
            parentmsgA: [{"id":1233445566,"name":1},{"id":22222,"name":2}]
        }
    },
    mounted:function () {
        this.parentmsgA = [{"id":1233445566,"name":1}, {"id":22222,"name":2}];
    },
    metheds:{
        test:function () {
            alert(11);
        }
    }
});

1.在组件外调用组件中数据的方法

aaa.options.data().labelname
（*在组件外只能调用到组件里data中的数据，但是不能通过这种方法改变data中的数据）

2.在组件外调用组件方法

aaa.options.metheds.test（）
调用组件中的方法去改变组件data中的数据）

3.vue实例自动加载N个组件中的一个，并切换显示某一个组件

这里写图片描述
在实例中定义currentSearch,该值为组件名，当currentSearch值变化时自动切换对应组件

4.vue实例和组件之间的数据传递

这里写图片描述

（1）vue实例向组件传数据

● componet使用v-bind绑定parentmsg
● 在vue实例中定义一个data名为parentmsg
● 在对应的componet中加上
● props: [‘parentmsg’]

beforeMount: function () {
    this.parentmsg = this.parentmsg;
}

● 在componet中通过this.parentmsg来调用
● 当vue实例中的parentmsg发生改变时，组件中的parentmsg数据自动发生变化
● 传递多个值的写法
v-bind:parentmsg=”parentmsg” v-bind:parentmsgb=”parentmsgb”
props: [‘parentmsg’,’parentmsgb’]
● 组件中如果想监控parentmsg,可以通过watch方法
watch:{
parentmsgb:function () {
//监控传递过来的parentmsgb
}

（2）组件向vue实例传递数据
组件中定义一个方法，使用this.$emit 发送数据

setParams: function () {
    var params = {
        'type': 3,

        'labelid': this.reselected,
        'reportpush': 1
    };
    this.$emit('search', params)
}

component上添加一个自定义事件，名字叫search

getSearch: function (params) {
    var params = params;
}

vue中动态增加元素的操作
这里写图片描述
例如，点击新增收件人时，如果用DOM或者jq方法，那么在数据发生变化时，DOM或jq新增的行也依然会存在，所以不采用此种处理方式，而是通过改变收件人数组的数据来处理。并且在添加新收件人时，要把页面已经输入的值存储进收件人数组，否则虽然增加了一行收件人，但是所有的收件人内容都被清空。