vue父子组件传值加例子

父传子:用prop;

子传父:1,用ref ; 2 用eventBus 监听事件与触发事件;

父组件:

<template><div>
  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm"
      label-width="100px" class="demo-dynamic">

  <el-form-item prop="email" label="邮箱" :rules="[{required: true,message:‘请输入邮箱地址‘, trigger:‘blur‘ },{type:‘email‘,message:‘请输入正确的邮箱地址‘,trigger:‘blur,change‘}]">
    <el-input v-model="dynamicValidateForm.email" ref="myemail"></el-input>
  </el-form-item>

  <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="‘域名‘ + index"
      :key="domain.key" :prop="‘domains.‘ + index + ‘.value‘" :rules="{required: true, message: ‘域名不能为空‘, trigger: ‘blur‘}">
      <el-input v-model="domain.value"></el-input>
      <el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>

  <span ref="myspan" class="redmy">23232</span>

  <el-form-item>
    <el-button type="primary" @click="submitForm(‘dynamicValidateForm‘)">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm(‘dynamicValidateForm‘)">清空所有</el-button>
  </el-form-item>

</el-form>

<childone ref="childonemyyy" :toChildEmail="dynamicValidateForm"  v-on:kidChange = "checkEditBills"></childone>
</div>
</template>
<script>
import childone from ‘./childone‘
  export default {
    components:{childone},
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ‘‘
          }],
          email: ‘‘,
          spanval:‘‘
        }
      };
    },
    methods: {
      checkEditBills(val){
          console.log("val:"+val);  //val:woshi1zizujian1
          this.dynamicValidateForm.domains.push({
          value: ‘‘,
          key: Date.now()
        });
      },
      submitForm(formName) {

        this.$refs["childonemyyy"].isAdd;//"mychildone"用在父组件上引用子组件值,返回子组件上的data数据
        this.$refs["myspan"].className;  //redmy  用在元素上,返回元素节点对象

        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert(‘submit!‘+this.$refs[formName].email);
          } else {
            console.log(‘error submit!!‘);
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: ‘‘,
          key: Date.now()
        });
      }
    }
  }
</script>

子组件:

<template><div>
    <p ref="zzzchildone" class="ppp">我是p段落,我是子组件一</p>
    <el-button @click.native="submit">清空邮箱</el-button>
    <el-button @click.native="add">新增域名</el-button>
    <p>{{toChildEmail.email}}</p>
    </div>
</template>
<script type="text/javascript">
     export default {
         props:["toChildEmail"],
         //父传子,toChildEmail来自父组件
         // 父中这么写的:<childone ref="childonemyyy" :toChildEmail="dynamicValidateForm.email"></childone>
         data(){
             return{
                 isAdd:"mychildone",
             }
         },
         methods:{
             submit(){
                 this.$refs["zzzchildone"].className //ref用在元素上,获取元素节点对象

                 this.toChildEmail.email="";   //子组件通过props得到了父的对象值,共享,也能改值

             },
             add(){
                 var dd="woshi1zizujian1";
                 // this.$emit(‘kidChange‘,event,dd);
                 //这个会触发父组件立即执行父组件的checkEditBills()方法,且有e信息,坐标等
                 this.$emit(‘kidChange‘,dd);
                 //这个会触发父组件立即执行父组件的checkEditBills()方法,把子组件的值dd传给父
             }
         },
         created(){

         }
     }
</script>

原文地址:https://www.cnblogs.com/wulinzi/p/8322150.html

时间: 2024-11-10 15:19:30

vue父子组件传值加例子的相关文章

一个故事讲懂vue父子组件传值

作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过props属性来实现父组件: <template>  <div id="app">    <child-component v-bind:dataOfChild="dataOfParent"></child-component&

Vue父子组件传值

 Vue父子组件传值:有四种方式:props,ref,emit 和模板传递通信slot 通过props来传值: 静态传值就是直接通过props来传递 动态传值是通过v-bind来绑定一个要传递值的key,然后后面跟要传递的内容,不过这个内容是可以改变的 比如: <input v-model="parentMsg"> <child v-bind:message="parentMsg"></child> 传递的值会跟着input里面输

Vue 父子组件传值 props

1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props 还提供许多验证,使数据更加严谨. 在使用父子传值时,出现了, 按照文档说明,例如: 1 <template> 2 <div v-if="data">{{parentName}} 3 4 <input type="text" v-model=

vue 父子组件传值

父组件通过属性向子组件传值 单向数据流,父组件可以向子组件传值,子组件不能向父组件传值 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="app"> 9 <counter :coun

关于vue父子组件传值问题

今看到一篇关于vue传值的文章,遂记下.共勉之! /* * 父组件界面写法 */ <template> <div id="home"> <chid :sendDataToChid="words" :sendSecondData="moreWords" @fromSon="fromSon"> </child> <p>{{fromSonData}}</p> &

vue父子组件传值例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

vue父子组件之间传值

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

vue父子组件的传值总结

久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. 情况一:父组件给子组件传值方法,使用props 父页面:parent.vue 1 <template> 2 <div class="sidebar_contianer"> 3 <sidebar-item :routerData="transmitDa