社区首页 >专栏 >vue的修饰符!sync和el-dialog弹窗组件

vue的修饰符!sync和el-dialog弹窗组件

leader755

发布于 2022-03-09 06:24:17

75600

代码可运行

文章被收录于专栏：万丈高楼平地起万丈高楼平地起

运行总次数：0

代码可运行

父组件 index.vue：

<template>
  <info :value="myValue" @valueChanged="e => myValue = e"></info>
</template>

<script>
  inport info from './info.vue';
  export default {
      components: {
          info,
      },
      data() {
          return {
              myValue: 1234,
          }
      },
  }
</script>

子组件 info.vue：

// info.vue组件定义了一个value 属性， 和一个valueChanged事件
<template>
  <div>
    <input @input="onInput" :value="value" />
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
      },
    },
    methods: {
      onInput(e) {
        this.$emit("valueChanged", e.target.value);
      },
    },
  };
</script>

通过.sync 可以简化上面代码

// index.vue组件
<info :value.sync="myValue"></info>

//..... methods: { onInput(e) { this.$emit("update:value", e.target.value) } }
//....

实际运用：父组件：

<template>
  <div class="goodsQuery">
    <!--选取商品弹框-->
    <goodsSelect
      :showGoodsSelect.sync="showGoodsSelect"
      :dialogWidth="860"
    ></goodsSelect>
  </div>
</template>
<script>
  import goodsSelect from "./goodsSelect";
  export default {
    name: "goodsQuery",
    components: { goodsSelect },
    data() {
      return {
        showGoodsSelect: false, // 选择商品弹窗
      };
    },
  };
</script>

子组件：

<template>
  <div class="pull-goods">
    <el-dialog
      title="选择商品"
      :visible.sync="isShowGoodsSelect"
      :width="dialogWidth + 'px'"
    >
      <el-form ref="form" label-width="80px;" inline>
        <div class="inlineBlock">
          <el-form-item>
            <el-select
              v-model="selectedName"
              @change="changeSelect"
              class="brand"
              style="width:100px; font-size:12px"
            >
              <el-option
                v-for="item in tradename"
                :label="item.label"
                :value="item.key"
                :key="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item v-if="selectedName == '1'" class="marginleft">
          <el-input v-model="params.condition" placeholder="请输入不超过30个字符" style="width:200px;font-size:12px"></el-input>
        </el-form-item>
        <el-form-item v-if="selectedName == '2'" class="marginleft">
          <el-input v-model="params.condition" placeholder="请输入不超过30个数字" style="width:200px;font-size:12px"></el-input>
        </el-form-item>
        <el-form-item v-if="selectedName == '3'" class="marginleft">
          <el-input v-model="params.condition" placeholder="请输入" style="width:200px;font-size:12px"></el-input>
        </el-form-item>
        <el-form-item v-if="selectedName == '4'" class="marginleft">
          <el-input v-model="params.condition" placeholder="请输入" style="width:200px;font-size:12px"></el-input>
        </el-form-item> -->
        </div>
        <el-form-item class="marginleft">
          <el-button type="primary" @click="tkQueryBtn">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          width="50"
          type="selection"
        ></el-table-column>
        <el-table-column label="商品" width="300">
          <template slot-scope="scope">
            <div class="goodsimg">
              <img
                v-if="scope.row.mainImageUrl"
                :src="scope.row.mainImageUrl + '?x-oss-process=image/resize,m_fixed,h_32,w_32'"
              />
              <img v-else src="~&&/assets/images/logo.png" />
              <span class="lineStandard">{{scope.row | getGoodsStr}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="upc" label="商品条码"></el-table-column>
        <el-table-column
          prop="shopBrandName"
          label="商品品牌"
        ></el-table-column>
      </el-table>
      <!-- <pagination position="right" v-show="total>0" :total="total" :page.sync="params.page" :limit.sync="params.rows" @pagination="tkQueryBtn" /> -->
      <div slot="footer">
        <el-button @click="isShowGoodsSelect=false">取 消</el-button>
        <el-button type="primary" @click="confirmBtn(isShowGoodsSelect=false)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: ["showGoodsSelect"],
    computed: {
      isShowGoodsSelect: {
        get() {
          return this.showGoodsSelect;
        },
        set(val) {
          this.$emit("update:showGoodsSelect", val);
        },
      },
    },
  };
</script>