vue组件的封装

vue一个非常重要且实用的特点就是组件化。

一、什么是组件化？

通俗来说就是在一个项目中，有一个组件A，要在多个页面中使用A，那么如果在每个页面都来写这多个组件的组合肯定是一种非常低效率的方法，所以最优解是单独对这多个组件进行封装，通过子父组件的传值来实现高复用的组件功能，这就是组件化。

二、封装组件

有一点要说明一下，就是在vue中父子组件的传值是单向数据流，意思就是我无法在父组件修改子组件的v-model的值，如果一定要对v-model进行相关操作，那么应该使用input和value完成一次完整的修改。

子组件代码：

<template>
  <!--关键词搜索-->
  <van-row type="flex" justify="center">
    <div class="box_search">
      <van-search
        :value="value"
        :placeholder="placeholder"
        show-action
        left-icon=""
        @input="updateVal($event)"
      >
        <template #action>
          <div @click="onSearch" class="btn_search">Go</div>
        </template>
      </van-search>
    </div>
  </van-row>
</template>

<script>
import { Search, Row } from "vant";
export default {
  name: "search",
  components: {
    [Search.name]: Search,
    [Row.name]: Row,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "请输入关键词..",
    },
  },
  methods: {
    onSearch() {
      this.$emit("onSearch", this.value);
    },
    updateVal(val) {
      this.$emit("input", val);
    },
  },
};
</script>

多次调用全局引用

import Search from './components/search/search.vue'
Vue.component('Search', Search);

父组件

<template>
    <van-row>
      <search :value="value" @onSearch="onSearch" @input="onInput"></search>
    </van-row>
</template>

<script>
    methods: {
        onInput(val) {    
          this.value = val;
        },
    }
</script>

解释：

1.value是我定义的一个绑定输入框的值，通过props来接收父组件传过来的值

ps：这里也可以直接使用v-model，但是在页面中输入值时会报错。
2.通过input事件去监听用户输入(updateVal)，当有输入时，我要向父组件发射这个方法。

3.父组件通过接收子组件发射的方法(input)再去更新值。