Vue学习之旅

狗昊学Java

已于 2023-06-13 16:55:21 修改

阅读量130

点赞数

文章标签：学习

于 2023-06-12 19:53:52 首次发布

本文链接：https://blog.csdn.net/qq_48371401/article/details/131175546

版权

Vue学习之旅

本文用于记录各种bug及其解决方式
Vue 2.x官方网址：vue官网点我在这里插入图片描述

1.SP集成MP后数据出现id混乱的问题

主要是值例如我当前用户的最后id字段为2，新增一个数据后id变为天文数字，解决方法如下：

@Data
public class Emp {
    
    @TableId(value = "id",type = IdType.AUTO)
    private Integer id;
    private String name;
    private String sex;
    private double salary;
}

添加@TableId注解而且一定要注意加value属性

2.ES6相关内容

ES6基本语法

使用let和const来代替var
在这里插入图片描述

箭头函数

在这里插入图片描述

对象定义

在这里插入图片描述

3.Vue的组件

数据传递

子组件与父组件数据的单向传递，父组件值发生变化时子组件可以同步该数据，但是注意子组件的数据改变不影响父组件（不允许），因此称为单向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子父组件之间的数据传递</title>
    <div id="app">
<!--        1. 父组件向子组件传值使用props,静态数据和动态数据在下均有演示-->
        msg: {{ msg }}
<!--        静态传递, 在标签上以key=value形式声明-->
        <login title="我的标题" msg: this.msg></login>
<!--        动态传递, 用绑定机制 v-bind或直接 :，这样我可以直接拿到父组件中的数据了-->
        <login :name="name"></login>
<!--        下面举一个动态绑定的典型用法，其本质就是子父组件之间数据单向绑定，-->
<!--        为啥为单向绑定呢，在此我们仅仅研究的是子组件获取父组件的数据，且-->
<!--        当父组件的数据发生改变时，子组件的数据会协同进行改变-->
        这是父组件的counter: <input type="text" v-model="counter"><br>
<!--        子组件count与counter绑定,当上面输入框中内容发生改变时子组件的值也会改变-->
        <b>下面这是子组件的counter: </b><child :count="counter"></child>
    </div>
</head>
<body>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const login = {
        template: `<div><h3>用户登录</h3>
                        <span>静态绑定： {{ title }}, {{ instanceTitle }}</span>
                        <h4>动态绑定： {{ name }}</h4>
                  </div>`,
        data() {  // 子组件的data只能以这种形式定义, return也要写！！！
            return {
                // title: '你好啊'  // 报错！不允许在子组件中重新定义与传递组件相同命名的内容
                instanceTitle: this.title,
            }
        },
        props: ['title', 'msg', 'name']
    };
    const child = {
        template: `<div><h3>这是组件间中的计数器：{{ count }}</h3>
                  </div>`,
        data() {  // 子组件的data只能以这种形式定义, return也要写！！！
            return {
                
            }
        },
        props: ['count']
    };
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0,
            msg: '我是父组件中的数据啊啊啊啊',
            name: '小小狗昊'
        },
        methods: {
            
        },
        components: {  // 组件,注意父组件要用components
            // login: login, 重名直接使用login即可
            login,  // 子组件
            child
        }
    })
</script>
</html>

我就非得子组件能够给父组件传值（实际开发中会出现这种情况，例如头像上传并更新），那就使用下面这种方式$emit(‘x’)（这其实叫做事件传递）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子父组件之间的事件传递</title>
<!--    事件传递直接在标签上定义事件 @传递事件名="父组件的事件名"-->
    <div id="app">
        父组件中的计数器: {{ counter }} <br>
        <b>子组件中的计数器:</b>
        <login @aa="test2"></login>
    </div>
</head>
<body>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const login = {
        template: `<div><h3>用户登录---{{ name }}---计数为 {{ count }}</h3>
                    <button @click="test1">点我触发父组件中的事件</button>
                  </div>`,
        data() {  // 子组件的data只能以这种形式定义, return也要写！！！
            return {
                count: 886
            }
        },
        methods: {
            test1() {
                alert("我是子组件啊啊啊啊")
                // this.$emit(x, para)传递父组件中的事件
                // 参数x 代表调用的事件名, para 传递时携带的数据
                // this.$emit('aa')  // ！！！带引号，且该x为定义的@x后的x而不是父组件中的事件名
                this.$emit('aa', this.count)  // 此处this为子组件,意思是在调用父组件的test是将自建中的count带过去了
            }
        },
        props: ['name']
    };
    const app = new Vue({
        el: '#app',
        data: {
            name: '小小狗昊',
            counter: 0
        },
        methods: {
            test2(count) {
                alert("我是父组件啊啊啊啊")
                this.counter = count  // 将子组件中的值传到了父组件中
            }
        },
        components: {  // 组件,注意父组件要用components
            login
        }
    })
</script>
</html>

同理当我们要传递的参数过多时，我们可以用对象对其进行封装，以如下形式：

// 子组件
methods: {
    test1() {
        alert("我是子组件啊啊啊啊")
        this.$emit('aa', {id:id, name:name, sex:sex})  
    }
},
// 父组件中的methods
methods: {
    test2(user) {
        alert("我是父组件啊啊啊啊")
        console.log(user.name)  // user.xxx
    }
},