父组件可以使用 props 把数据传给子组件
使用:
{
...
props: ['placeholder','cname'],
data() {
return {
placeholder: '点击搜索项目、地块、摄像头',
inputText: '',
}
}
...
}
<MapSearch
:cname="cname"
placeholder="测试placeholder"
@searchResultClick="resultClick"
>
</MapSearch>
子组件可以使用 $emit 触发父组件的自定义事件
使用:
...
searchResultClick(item) {
this.viewStatus = 0b1000;
console.log(item);
this.$emit('searchResultClick',item);
},
...
<MapSearcb @searchResultClick="resultClick">
</MapSearcb>
...
resultClick(item){
console.log('外部item点击回调:' );
console.log(item);
}
...
双向绑定 v-model
可以参考
https://www.cnblogs.com/bldf/p/6645225.html
https://jsfiddle.net/d502zdxk/255/
this.$emit('input', this.val) 大概是固定写法。v-model相当于个语法糖
<template>
<div id="xxxx">
<VueDragResize style="background: orange" :x="newValue.x" :y="newValue.y" :w="newValue.w" :h="newValue.h" v-on:resizing="resize" v-on:dragging="resize">
<h3>Hello World!</h3>
<p>{{ newValue.y }} х {{ newValue.x }}</p>
<p>{{ newValue.w }} х {{ newValue.h }}</p>
</VueDragResize>
</div>
</template>
<script>
import VueDragResize from "vue-drag-resize";
export default {
name: "resizedItem",
props: {
value: {
type: Object,
default: () => ({
compName: "组件名称",
imgName: "",
w: 200,
h: 200,
x: 20,
y: 20,
jsonAdvAttr: "",
jsonEvents: "",
jsonMock: "",
zIndex: 0
})
}
},
watch: {
value: {
handler(newVal) {
console.log("property updated", newVal);
this.newValue = newVal;
},
deep: true
}
},
components: {
VueDragResize
},
data() {
return {
newValue: this.value
};
},
methods: {
resize(newRect) {
this.newValue.w = newRect.width;
this.newValue.h = newRect.height;
this.newValue.x = newRect.left;
this.newValue.y = newRect.top;
this.$emit("input", this.newValue);
}
}
};
</script>