vue 2.9 常用操作技巧

一：获取url地址栏参数

例如：/placeList?id=1;

this.$route.query.id  (id为连接上的参数名称)

二：向下一个页面传递对象 (query传参) 

父.vue

this.$router.push({
    path:"/placeAdd",
    query:item
});
//path和query均为固定key名
//path：跳转路径
//query: 传递参数对象
//item:数组对象

子.vue

取数据：this.$route.query.item

this.$route.query.item

三：父组件向子组件传值

父.vue

/*引入子组件*/
<share-wx ref="chil"></share-wx>


/*script
*showHover为子元素内的方法*/
this.$refs.chil.showHover("父组件调用子组件方法啦");

子.vue

//只需要正常定义方法接参即可
methods: {
    showHover(text) {
     console.log(text)
    }
}

四：阻止父元素冒泡事件

<div @click="a">
    <button @click="b"></button>
</div>

当触发button的事件a时，b事件也会被触发

解决办法：在button上添加@click.stop="b"，来阻止事件冒泡。

<div @click="a">
    <button @click.stop="b"></button>
</div>

五：去掉指定数组对象id相同的元素

arr.splice(arr.findIndex(item => item.id == id), 1)

六：对对象进行排序

    // 指定排序的比较函数
    compare(property) {
      return function(obj1, obj2) {
        var value1 = obj1[property];
        var value2 = obj2[property];
        return value1 - value2; // 升序
      };
    }

七：只能输入数字类型+小数点

纯整数

onkeyup = "value=value.replace(/[^\d]/g,'')"

数字类型+小数点

<input type = "text" oninput = "value=value.replace(/[^\d.]/g,'')" />