vue父子組件傳值加例子

例子：http://element-cn.eleme.io/#/zh-CN/component/form         上進行改的

父傳子：用prop；子組件能夠改變父組件的值，是共享的，和父操作是一樣的效果；

子傳父：1，用ref ，父中通過this.$refs["***"].屬性 可以得到子組件的data屬性值，共享，能進行更改操作；

　　　　2， 用eventBus 監聽事件與觸發事件；

vue父子組件傳值加例子

父組件：

<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>

 

vue父子組件傳值加例子