自定义组件模拟v-model

在项目中常常会遇到一个组件中引入好几个子组件的情况，而引入的子组件和子组件之间又需要有数据交互，如果使用父组件作为桥梁进行数据交互这个也是可以的，只是有些麻烦，so最理想的是子组件和子组件自己去交互，记录一下使用子组件和子组件传参并模拟v-model的一个过程

一、创建项目

先使用cli 创建一个测试项目

二、添加依赖

在 package.json中添加所需的element依赖

  "dependencies": {
    "element-ui": "^2.10.1"
  }

main.js引入

	import 'element-ui/lib/theme-chalk/index.css'
	import ElementUI from 'element-ui'
	Vue.use(ElementUI);

三、创建组件

1. 定义header_component

<template>
    <div class="nav-top">
        <div class="go-back" >
            <i class="el-icon-arrow-left icon-back"></i>
        </div>
        <div class="map-name" >{{name}}</div>
        <div class="icon-style">
            <i class="el-icon-edit icon-size"  @click="showEditDialog"></i>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import BToB from './b_to_b.js';

    export default {
        name: "header_component",
        data(){
          return{
              name:'春节联欢晚会'
          }
        },
        created(){
            this.listenBtoBFromEdit();
        },
        methods:{
            showEditDialog(){
                BToB.$emit("switch_dialog",true);
            },
            listenBtoBFromEdit(){
                BToB.$on("update_template_params",val =>{
                    this.name = val;
                })
            },

        }
    }
</script>

2. 定义edit_component

<script type="text/ecmascript-6">
    import BToB from './b_to_b.js';
    export default {
        name: "edit_component",
        data(){
            return{
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                dialogVisible:false
            }
        },
        watch:{
            form:{
                handler(newValue) {
                    BToB.$emit("update_template_params",newValue.name);
                },
                deep: true
            }
        },
        created() {
            this.listenBtoB();
        },
        methods:{
            listenBtoB(){
                BToB.$on("switch_dialog",val =>{
                    this.dialogVisible = val;
                })
            }
        }
    }
</script>

3. 定义代理js b_to_b.js

	import vue from 'vue';
	export default new vue();

4. 修改helloWorld 组件页面

<template>
  <div class="container">
    <header-component></header-component>

    <edit-component></edit-component>
  </div>
</template>

<script>
  import HeaderComponent from "@/components/header_component";
  import EditComponent from "@/components/edit_component";
export default {
    methods: {
    },
  components:{
      HeaderComponent,
      EditComponent
  }
}
</script>

<style scoped>
.left-menu{
  width: 230px;
  height:calc(100% - 40px);
}
</style>

完整目录结构

最后运行测试如图

完整demo 地址 https://github.com/dengxiaoning/brother-to-brother