vue中的父子组件之间的通信--新增、修改弹框

在一个vue页面中有时候内容会很多,为了方便编写查看,可以分为多个子组件,最后在父组件中引入对应的子组件即可。

下面这个是父子组件通信中的一个具体实例:新增、修改弹框。 子组件中主要写了关于新增、修改的弹框,

子组件:

1.弹框:

<div class="newDocuments">
    <div class="newDocuments_center">
      <div class="center_header">
        <div class="header_left">{{ headers }}</div>
        <div class="header_right">
          <div @click="cancel" style="font-size:20px;">x</div>
        </div>
      </div>
      <div class="center_center">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
            <el-form-item label="日期" style="width:422px;height:51px;">
                <el-input v-model="form.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" style="width:422px;height:51px;">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="省份" style="width:422px;height:51px;">
                <el-input v-model="form.province" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市区" style="width:422px;height:51px;">
                <el-input v-model="form.city" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" style="width:422px;height:51px;">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮编" style="width:422px;height:51px;">
                <el-input v-model="form.zip" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(‘form‘)" v-if="headers == ‘新增‘">立即添加</el-button>
                <el-button type="primary" @click="submitForm(‘form‘)" v-else>立即修改</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

2.接收的数据以及需要依靠父组件的点击事件

props:["modify", "headers"],

cancel() {
    this.$emit("cancel")
}

3.新增、修改时弹框显示的内容需要进行监听

watch: {
    modify: function(){
      this.form = this.modify;
    }
  },

父组件:

1.引入子组件:

<children v-show="addTo" @cancel="cancels" :modify=‘modify‘ :headers=‘headers‘></children>

import children from ‘./father/children‘

components: {
    children,
  },

2.定义需要传给子组件的数据:

modify: ‘‘,
headers: ‘‘,

3.点击新增、修改按钮时传对应的数据给子组件:

addData(){
      this.addTo = true;
      this.modify = {
        date: ‘‘,
        name: ‘‘,
        province: ‘‘,
        city: ‘‘,
        address: ‘‘,
        zip: ‘‘,
      };
      this.headers = ‘新增‘;
    },
    editData(row){
      this.addTo = true;
      this.modify = row;
      this.headers = ‘修改‘;
    },
    cancels(){
      this.addTo = false;
    }

注意:

父组件向子组件中传值使用prop,子组件中需要使用事件时使用emit向父组件传,总的来说,子组件中用到的数据以及事件都是依靠父组件得来的。

完整代码:

<template>
  <div class="contrainer">
    <children v-show="addTo" @cancel="cancels" :modify=‘modify‘ :headers=‘headers‘></children>
    <div class="contrainer_top">
      <el-button @click="addData" type="primary" size="small">新增</el-button>
    </div>
    <div class="contrainer_bottom">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          min-width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          min-width="50">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          min-width="70">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          min-width="70">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          min-width="50">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="editData(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import children from ‘./father/children‘
export default {
  name: ‘father‘,
  components: {
    children,
  },
  data () {
    return {
      tableData: [{
        date: ‘2016-05-02‘,
        name: ‘王小虎‘,
        province: ‘上海‘,
        city: ‘普陀区‘,
        address: ‘上海市普陀区金沙江路 1518 弄‘,
        zip: 200333
      }, {
        date: ‘2016-05-04‘,
        name: ‘王小虎‘,
        province: ‘上海‘,
        city: ‘普陀区‘,
        address: ‘上海市普陀区金沙江路 1517 弄‘,
        zip: 200333
      }, {
        date: ‘2016-05-01‘,
        name: ‘王小虎‘,
        province: ‘上海‘,
        city: ‘普陀区‘,
        address: ‘上海市普陀区金沙江路 1519 弄‘,
        zip: 200333
      }, {
        date: ‘2016-05-03‘,
        name: ‘王小虎‘,
        province: ‘上海‘,
        city: ‘普陀区‘,
        address: ‘上海市普陀区金沙江路 1516 弄‘,
        zip: 200333
      }],
      addTo: false,
      modify: ‘‘,
      headers: ‘‘,

    }
  },
  methods: {
    addData(){
      this.addTo = true;
      this.modify = {
        date: ‘‘,
        name: ‘‘,
        province: ‘‘,
        city: ‘‘,
        address: ‘‘,
        zip: ‘‘,
      };
      this.headers = ‘新增‘;
    },
    editData(row){
      this.addTo = true;
      this.modify = row;
      this.headers = ‘修改‘;
    },
    cancels(){
      this.addTo = false;
    }

  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.contrainer{
  .contrainer_top{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .contrainer_bottom{
    /deep/ .el-table .cell {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      white-space: normal;
      word-break: break-all;
      line-height: 15px;
    }
    /deep/ .el-table thead th {
      padding: 4px 0;
      font-size: 14px;
      color: #43464a;
      background-color: #f5f6fa !important;
      border-bottom: 1px solid #dee2ed;
      border-right: 1px solid #ebeef5;
    }
    /deep/ .el-table td, .el-table th.is-leaf {
      border-bottom: 1px solid #EBEEF5;
    }
    .el-table th, .el-table td {
      padding: 10px 0;
    }
  }
}
</style>

父组件

<template>
  <div class="newDocuments">
    <div class="newDocuments_center">
      <div class="center_header">
        <div class="header_left">{{ headers }}</div>
        <div class="header_right">
          <div @click="cancel" style="font-size:20px;">x</div>
        </div>
      </div>
      <div class="center_center">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
            <el-form-item label="日期" style="width:422px;height:51px;">
                <el-input v-model="form.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" style="width:422px;height:51px;">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="省份" style="width:422px;height:51px;">
                <el-input v-model="form.province" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市区" style="width:422px;height:51px;">
                <el-input v-model="form.city" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" style="width:422px;height:51px;">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮编" style="width:422px;height:51px;">
                <el-input v-model="form.zip" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(‘form‘)" v-if="headers == ‘新增‘">立即添加</el-button>
                <el-button type="primary" @click="submitForm(‘form‘)" v-else>立即修改</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  props:["modify", "headers"],
  components:{

  },
  data() {
    return {
      form: {
        date: ‘‘,
        name: ‘‘,
        province: ‘‘,
        city: ‘‘,
        address: ‘‘,
        zip: ‘‘,
      },
      rules: {
      }
    };
  },
  watch: {
    modify: function(){
      this.form = this.modify;
    }
  },
  methods: {
    submitForm(formName) {

    },
    cancel() {
      this.$emit("cancel")
    }
  }
}
</script>
<style lang="scss" scoped>
.newDocuments{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba($color: #000000, $alpha: 0.4);
  // display: flex;
  // align-items: center;
  // justify-content: center;
  min-height: 500px;
  overflow: auto;
  .newDocuments_center{
    width: 43%;
    background: white;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    position: relative;
    margin: 5% auto; /*水平居中*/
    top: 70px; /*偏移*/
    transform: translateY(-50% -50%);
    .center_header{
      background: #f8f8f8;
      height: 45px;
      border-bottom: 1px solid #e7eaec;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 3px;
      font-size: 14px;
      .header_left{
        margin-left: 20px;
      }
      .header_right{
        margin-right: 20px;
        display: flex;
        align-items: center;
        div{
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }

    .center_center{
      border-radius: 3px;
      width: 97%;
      margin: 20px auto;
      padding: 0 0 20px 0;
      /deep/ .el-form-item__label {
        font-size: 15px !important;
      }
      /deep/ .el-input__inner{
        height: 30px;
        line-height: 30px;
      }
      /deep/ .el-form-item {
        margin-bottom: 12px;
      }
      /deep/ .el-form-item__content {
        line-height: 30px;
        position: relative;
        font-size: 14px;
        width: 300px;
      }
      /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 300px;
        line-height: 30px;
        position: relative;
        font-size: 14px;
      }
      /deep/ .el-input__icon{
        line-height: 30px;
        height: 30px;
      }
      /deep/ .el-form-item__error {
        color: #f56c6c;
        font-size: 12px;
        line-height: 2px;
        padding-top: 0px;
        position: absolute;
        top: 100%;
        left: 0;
      }
      /deep/ .el-form-item {
        margin-bottom: 0px;
      }
      /deep/ .el-form-item__content{
        width:100%;
        display: flex;
      }
      /deep/ .el-form-item__label{
        line-height: 27px;
      }
      /deep/ .el-button{
        padding: 7px 14px;
        font-size: 14px;
        border-radius: 2px;
      }
      /deep/ .el-form-item__label {
        font-size: 15px !important;
      }
    }
  }
}
</style>

子组件

OK了。

原文地址:https://www.cnblogs.com/5201314m/p/11673468.html

时间: 2024-10-03 04:34:02

vue中的父子组件之间的通信--新增、修改弹框的相关文章

VUE 2.0 父子组件之间的通信

父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></child> //注意这里用驼峰写法哦 </parent> data(){ return { content:'sichaoyun' }; } 子组件通过props来接受数据 第一种方法 props: ['childCom'] 第二种方法 props: { childCom: String //这里

【转】vue父子组件之间的通信

vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).v

React 组件基本使用(3) ---父子组件之间的通信

当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据. 很简单的一个例子,我们在输入框中输入温度,输入框下面显示冷和热.这里就有两个组件,输入框和它下面的显示内容,且它们共享一个状态,就是温度.所以我们要把温度这个状态放到这两个组件的父组件中.这里就有三个组件,一个输入框TemperatureInput,  一个是显示内容

Vue组件~父子组件之间的通信(传值)

1.父组件向子组件传参 父组件中通过v-bind对要传参数的绑定:(例如) :dataSourceName:是在子组件中要用到的值 "ctpSaveEchartSetting.dataSourceId":是在父组件中要传的值 子组件中的接收通过props(数据值单项绑定的)进行接收:(例如) 注:在props中有的变量就不能再data中再定义,或通过监测.计算属性直接去改变,因为js中的对象和数组是引用对象,指向同一个内存空间,如果在子组件中改变props中的值会影响到父组件中的值的状

vue 父子组件与父子组件之间的通信

<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <input type="text" v-model=&q

vuex 实现vue中多个组件之间数据同步以及数据共享。

前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以通过props向子元素传递参数,子元素也可以通用smit向父元素传递参数.但是像购物车这种在项目中多个位置的引用时就会变得很麻烦.例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改变时,就要通过自身告诉父组件我的值发生改变了,然后父组件在通知其他两个购物车组件值发生改变了,需要进行同步,这样就会变得很麻烦.而vue-v就可以帮助我们解决这个繁琐的问题.

vue学习之父子组件通信两种方法

初学vue,最常用及实用的就是父子组件之间的通信了,在此记录一点自己的学习过程 方法一:props及$emit 父组件中先引入子组件,然后components里面注册组件,然后template里调用,调用的时候通过v-bind传递值给子组件,v-on监听子组件$emit传递过来的值 子组件中先用props接收父组件的传值,注意子组件中不可直接修改父组件的传值,可通过watch监听来赋值,通过$emit来传递值给父组件 方法二:ref 父组件传值props方法不变,父组件可通过使用ref来调用子组

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu

Vue.js组件之间的通信

导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用) Props down, Events up 是指 使用props向子组件传递数据,父组件属性发生变化时,子组件可实时更新视图:子组件发生变化,可以使用$emit发送事件消息,以此向父组件传递变化消息. props 是单向的,当父组件的属性变化时,将传递给子组件,但子组件中的props属性变化不会