父组件 index.vue：
代码语言：javascript复制<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：
代码语言：javascript复制// 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 可以简化上面代码
代码语言：javascript复制// index.vue组件
<info :value.sync="myValue"></info>
//..... methods: { onInput(e) { this.$emit("update:value", e.target.value) } }
//....实际运用： 父组件：
代码语言：javascript复制<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>子组件：
代码语言：javascript复制<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>
