zoukankan      html  css  js  c++  java
  • vue中父子组件之间相互传值

    父传子:

     父组件:

    <view-doc :openDialog="openDialog"></view-doc>
    

      

    import viewDoc from './components/viewDoc'
    
    components: {
        'view-doc': viewDoc,
      },
    data () {
       return {
         openDialog:'123'
       }  
    }
    

      

     子组件: 

    props: {
        openDialog: Object
      },
      watch: {
        'openDialog.formData' (msg) {
          console.log(msg)
          this.form = {
            mobile: msg.mobile,
            email: msg.email,
            name: msg.name,
            note: msg.note,
          }
        }
      }
    

       

    子传父:

    父组件:

    <view-doc v-on:childByValue="childByValue"></view-doc>
    

      

    import viewDoc from './components/viewDoc'
    
    components: {
        'view-doc': viewDoc,
      },
    
    childByValue: function (childValue) {
          // childValue就是子组件传过来的值
          console.log(childValue,'值')
        },
    

      

    子组件:

    <el-button type="primary" @click="submitMessage">确定</el-button>
    

      

    submitMessage () {
          console.log(this.getCheckMessage)
          this.$emit('childByValue', this.getCheckMessage)
    
        },
    

      

      

  • 相关阅读:
    图片延迟加载方法
    mongodb常用命令
    未知尺寸元素水平垂直居中:
    nodejs学习之加密
    nodejs学习之events的使用
    nodejs学习之events
    学习Nodejs之mysql
    PHP之几道面试题
    Jquery学习插件之手风琴
    我的第一篇博客
  • 原文地址:https://www.cnblogs.com/rockyan/p/10255099.html
Copyright © 2011-2022 走看看