父组件可以使用 props 把数据传给子组件

使用:

//父控件
{
...
    props: ['placeholder','cname'],
    data() {
      return {
        placeholder: '点击搜索项目、地块、摄像头',
        inputText: '',
        }
    }
...
}

//父控件
<MapSearch
        :cname="cname"
        placeholder="测试placeholder"
        @searchResultClick="resultClick"
      >
</MapSearch>

//父控件调用绑定变量(`:placeholder`)或者直接赋值(`placeholder='xxx'`)            

子组件可以使用 $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>