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)再去更新值。