Vue父子组件的传值

父传子

• 将父组件的数据传递给子组件（通过v-bind绑定，子组件通过props接收）

<div id="app">
   <!-- 父传子（数据），通过v-bind: 可简写 : -->
   <com1 :parentmsg="msg"></com1>
</div>
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            msg:'123(我是父组件中的数据)',
        },
        },
        components:{
            com1:{
                template:'<h1>我是子组件---{{parentmsg}} </h1>',
                //props里面的数据是通过父组件传过来的，是只读的，无法重新赋值
                props:['parentmsg'],//把父组件传递过来的parentmsg属性现在props数组中定义一下，这样才能使用数据
            }
        }
     });
 </script>

效果图:

子传父

• 将子组件的数据传递给父组件(子组件使用$emit(eventName,optionalPayload)触发事件)

<div id="app">
<!-- 父组件的方法传给子组件 v-on: 简写@-->
<com2 @func="show"></com2>
</div>

<script>
var vm = new Vue({
    el: '#app',
    data: {
        datamsgFromSon : null,
    },
    methods: {
        show(data) {
           //console.log(data);//data是子组件的sonmsg
            this.datamsgFromSon = data //**子组件向父组件传值**
            console.log(this.datamsgFromSon)
        }
    },
    components: {
        com2: {
            data() {
                return {
                    sonmsg: { name: '小头儿子', age: 6 }
                }
            },
            template: '<div><h1>这是子组件2</h1><input type="button" value="子组件按钮，点击触发父组件传递过来的func方法,给父组件传值" @click="myclick"></div>',
            methods: {
                myclick() {
                    //调用父组件身上的方法，**将子组件数据sonmsg传递给父组件**
                    this.$emit('func', this.sonmsg)
                }
            }
        }
    }
});

点击按钮，打印出子组件的sonmsg:

父传子，子组件中的值改变时，更新父组件中的值

• 通过v-model双向绑定

父组件Home:

<template>
  <div class="home">
    <!-- 父传子（数据），通过v-model 绑定 -->
    <hy-serial-num v-model="msg"/>   
  </div>
</template>

<script>
// @ is an alias to /src
import HySerialNum from '@/HySerialNum/index.vue'

export default {
  name: 'Home',
  data(){
    return {
      msg: "20151030XXXXac"
    }
  },
  components: {
    HySerialNum
  }
}
</script>

子组件HySerialNum ：

<template>
  <div class="hello">
    <h2>{{value}}</h2> <!-- 观察父组件的值是否更新 -->
    <el-input placeholder="请输入内容" v-model="currentValue" @input="handleChange"></el-input>
  </div>
</template>

<script>
export default {
  name: "HySerialNum",
  data() {
    return {
      currentValue: this.value
    };
  },
  props: {
    value: String
  },
  watch: {
    value(newVal){
      console.log("newVal",newVal)
      this.currentValue = newVal
    }
  },
  methods:{
    handleChange(item){
      console.log("item",item);
      this.$emit('input',this.currentValue)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-input {
  width: 230px;
}
.el-switch{
  margin-left:10px;
}
</style>

Home父组件中通过v-model绑定，拆卸后是这样的：

<!-- <hy-serial-num v-bind:value="msg" v-on:input="msg = $event"/> -->
<hy-serial-num :value="msg" @input="msg = $event"/>

子组件中通过**this.$emit(‘input’,this.currentValue)**将父组件中的msg更新。

效果如下图：

刚进入页面时显示：

修改文本框中的值，父组件中的值随之更新（标签h2为测试效果）：

$ref方式

• 通过$ref可以获取子组件定义的方法

父组件：

<template>
  <div>
  	<div class="btn-group" style="text-align:right;margin-top:-15px;">
  	<!-- 通过$refs.factorModal.add() 获取子组件里面add()方法 -->
     <a-button
        type="primary"
        @click="$refs.factorModal.add()"
        style="margin-right: 65px;"
      >新增</a-button>
    </div>
    <a-table
      ref="tableInfo"
      bordered
      :columns="columnsInfo"
      size="small"
    >
      <template slot="action" slot-scope="text, record">
        <div class="btn-group">
        <!-- 通过$refs.factorModal.edit(record) 获取子组件里面edit()方法,并传递参数 -->
          <a
            @click="$refs.factorModal.edit(record)"
          >
          </a>
        </div>
      </template>
    </a-table>
    <!-- 子组件 -->
    <factor-form ref="factorModal" @ok="handleOkFactor" />
  </div>
</template>

<script>
import FactorForm from './FactorForm'

export default {
	name: 'AccidentEvent',
	components: {
	  FactorForm
	},
	data () {
	 return {
	 	columnsInfo:[]
	   }
	},
	methods:{
		handleOkFactor (data) {
	   		console.log(data)
	   },
	}
},
 
 
</script>

子组件：

<template>
  <a-modal
    title="发布防洪预警"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <template slot="footer">
      <a-button key="submit" type="primary" @click="handleSubmit">确定</a-button>
      <a-button key="back" @click="handleCancel">取消</a-button>
    </template>
    <a-form-model
      ref="formTable"
      :model="form"
      @submit="handleSubmit"
    >
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="排序" prop="orderNum">
            <a-input-number v-model="form.orderNum" :min="1" :max="100" style="width:180px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      confirmLoading: false,
      form: {}
    }
  },
  methods: {
    //子组件方法add()
    add () {
      this.confirmLoading = false
      this.visible = true
      this.form = {}
    },
    //子组件方法edit()（有父组件传递过来的数据）
    edit (record) {
      this.visible = true
      this.form = record
    },
    handleSubmit () {
      this.confirmLoading = true
      const form = this.$refs.formTable
      form.validate((valid) => {
        if (valid) {
          this.$emit('ok', this.form)
          this.visible = false
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>