zoukankan      html  css  js  c++  java
  • 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)再去更新值。

  • 相关阅读:
    年末反思
    Flink运行时架构
    Phoenix 启动报错:Error: ERROR 726 (43M10): Inconsistent namespace mapping properties. Cannot initiate connection as SYSTEM:CATALOG is found but client does not have phoenix.schema.
    Clickhouse学习
    Flink简单认识
    IDEA无法pull代码到本地,Can't Update No tracked branch configured for branch master or the branch doesn't exist.
    第1章 计算机系统漫游
    简单的 Shell 脚本入门教程
    开源≠免费 常见开源协议介绍
    MySQL 视图
  • 原文地址:https://www.cnblogs.com/pipim/p/13784616.html
Copyright © 2011-2022 走看看