vue常用代码片段

sicker in 移动智地

2021-04-29

预计阅读时间：1.66 min

共计：499 字

最后修改时间：7 months ago

# 跳转路由时返回顶部

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

1
2
3
4
5
6
7

# 修改当前页面title

export const constantRoutes = [
  {
    path: '/example',
    component: () => import('@/views/example'),
    name: 'Example',
    meta: {
        title: 'Example',
        icon: 'el-icon-s-help',
        keepAlive: false 
    },
  }
]
// 路由拦截器
router.beforeEach((to, from, next) => {
  // 路由发生变化时触发
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 子组件向父组件传参

父组件

<template>
  <div id="emit">
      <textA @hello="handleChange" />
      hello {{ words }}
  </div>
</template>
<script>
import textA from "../components/Text";
export default {
  components: { textA },
  data() {
    return {
      words: "sicker",
    };
  },
  methods:{
      handleChange(e){
          this.words = e;
      }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

子组件 ../components/Text.vue

<template>
    <input type="text" @change="sayHello" v-model="text" />
</template>
<script>
export default {
    data(){
        return {
            text:''
        }
    },
    methods:{
        sayHello(){
            this.$emit("hello",this.text);
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 动态组件

父组件

<template>
  <div v-for="(item, index) in componentList" :key="index">
    <component :is="item.type" @change="changeData" :item="item" /> <!--从循环体中获取到组件名 item.type 绑定 change 事件， prop 传参 item 对象-->
  </div>
</template>
<script>
  import checkbox from "./components/checkbox";
  import datepicker from "./components/datepicker";
  import datetime from "./components/datetime";
  ... // 所有涉及组件都需引入
  export default {
  name: "example",
  components: {
    checkbox,
    datepicker,
    datetime,
    ...
  },
  data() {
    return {
      componentList: [{type:'checkbox',fieldId:'10001',...},...], // 组件列表对象数组
      fields: [] // 用以收集表单数据
    }
  },
  method() {
    changeData(e, item) { // 绑定的 change 事件， 通过子组件 emit 触发 参照 ### 子组件向父组件传参
      this.fields[item.fieldId] = e;
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

动态组件 checkbox 示例

<template>
  <van-checkbox-group
    v-model="value"
    @change="onChange"
    ref="checkboxGroup"
    class="checked-btn"
  >
    <van-cell-group>
      <van-cell :title="item.name"></van-cell>
      <van-cell
        v-for="(e, index) in item.operations"
        clickable
        :key="e.id"
        :title="e.label"
        @click="toggle(index)"
      >
        <template #right-icon>
          <van-checkbox :name="e" ref="checkboxes" />
        </template>
      </van-cell>
      <div class="checkout">
        <div @click="checkAll" class="btn-tools">全选</div>
        <div @click="toggleAll" class="btn-tools">反选</div>
      </div>
    </van-cell-group>
  </van-checkbox-group>
</template>
<script>
export default {
  data() {
    return {
      value: [],
    };
  },
  props: ["item"], // 接收父组件的 props
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    onChange() {
      let arr = [];
      this.value.forEach((ele) => {
        arr.push({ id: ele.id });
      });
      this.$emit("change", arr, this.item);
    },
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# mixin

import resizeMixins from "@/utils/resizeMixins";
export default {
  name: 'example',
  mixins: [resizeMixins],
  ...

1
2
3
4
5

# 扩展阅读

vue 文档速查

- 更新中 -