vue常见错误

发表于   |   分类于 ，   |  

平常记录的Vue笔记

vue 相关报错

  • Donotusebuilt-inorreserved HTML elementsascomponent id: footer

这里的意思是 命名冲突。用了改个class就好了

router.repalce与router.push的区别

设想一个场景,在移动端我们有一个login登录页，然后一个首页。

我们判断登录成功之后 会跳到首页.这时候就只能是有router.replace而不能使用router.push方法。这样当在首页点击回退按钮的时候就不会出现浏览器回退到首页的情况了。

webpack打包的时候css背景图片的问题

我们知道一般引入图片地址有两种方式：

  • 1.在style中用@import 引入
  • 2.在script中用import 引入

image

通过require 引入

然后在index.vue
image

组件之间的相互通讯

  • 父=>子(父组件给子组件传递数据)
    使用prop传递数据

    1
    2
    3
    prop:{
        data:xxxx
    }

  • 子=>父(父组件获取子组件中的数据)
    使用ref

    1
    2
    3
    4
    5
    6
    7
    8
        <!--父组件 template-->
    <div id="parent">
      <!--子组件-->
      <user-profile ref="profile"></user-profile>
    </div>
        
        <!--父组件中获取子组件的数据-->
        this.$ref.profile.data

  • 父组件中调用子组件的方法
    使用ref

    1
    2
    3
    4
    5
    6
    7
    8
    9
        <!--父组件 template-->
    <div id="parent">
      <!--子组件-->
      <user-profile ref="profile"></user-profile>
    </div>
        
        <!--父组件调用子组件中的方法-->
        
        this.$ref.profile.somefunction();

  • 子组件中触发事件,父组件中相应事件

先绑定自定义事件 然后使用$emit触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <!--父组件 template-->
<div id="parent">
  <!--子组件-->
  <user-profile ref="profile" @zone="tell"></user-profile>
</div
    <!--子组件-->
    methods{
        this.$emit("zone","zone")  前者事件名称,后者参数
    }
    
    <!--父组件-->
    methods{
        tell(){
            console.log("触发了 啦啦啦");
        }
    }