vue父子组件传值

父子组件传值

1.父组件给子组件传值。

（写一个例子为，父组件有一个下拉框，切换下拉框的数据时，表格（子组件）中的内容也切换）

新建父组建father.vue文件。

思路：在切换下拉框点击查询时，将选中下拉选项的value值赋值给keyTab，将keyTab传给子组件

<template>
  <div class="wrapper">
    <el-select v-model="value" placeholder="请选择">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
    </el-select>
      <el-button @click = "submit">查询</el-button>
    <TableTab :keyTab = 'keyTab'/>
  </div>
</template>

<script type="text/ecmascript-6">
import TableTab from '@/views/test/TableTab'
export default {
  components: {  TableTab },
  props: {},
  data () {
    return {
        value:"0",
        keyTab:'0',
        options:[{
          value: '0',
          label: '黄金糕'
        }, {
          value: '1',
          label: '双皮奶'
        }, {
          value: '2',
          label: '蚵仔煎'
        }, {
          value: '3',
          label: '龙须面'
        }, {
          value: '4',
          label: '北京烤鸭'
        }]
    };
  },
  mounted () {
      
  },
  methods:{
      submit() {
          this.keyTab = this.value
      }
  }
  
};
</script>
<style lang="scss" scoped>
.wrapper{
    padding:14px 15px;
}
</style>

子组件（son.vue）文件：

思路：在子组件中通过props制定keyTab接收父组件传来的值。

1.在keyTab中指定keyTab的值类型（type）为String类型，默认值（default）为0。

2.用父元素传过来的值作为下标在数组tableTitle中取表格的标题。

3.在watch中监听keyTab值的改变，切换表格内容（放到生产环境，也就是真实的项目中时，可以在监听到keyTab的值改变时，重新请求接口，重新给tableData0赋值）

<template>
  <div class="wrapper">
    <el-table :data="tableData0" style="width: 100%"
    border>
         <el-table-column v-for='(item,i) in Object.entries(tableTitle[keyTab])' :key='i'
            :prop="item[0]"
            :label="item[1]">
            </el-table-column>
    </el-table>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  components: {},
  props: {
      keyTab:{
          type:String,
          default:"0"
      }
  },
  watch:{
      keyTab(key){
        switch (key){
            case '0' : this.tableData0 = this.tableData0;break;
            case '1' : this.tableData0 = this.tableData1;break;
            case '2' : this.tableData0 = this.tableData2;break;
            case '3' : this.tableData0 = this.tableData3;break;
            case '4' : this.tableData0 = this.tableData4;break;
        }
      }
  },
  data () {
    return {
        tableTitle:[{date:'日期0' ,name:'姓名' ,address:'地点'},{date:'日期1' ,name:'姓名' ,address:'地点'},{date:'日期2' ,name:'姓名' ,address:'地点'},{date:'日期3' ,name:'姓名' ,address:'地点'},{date:'日期4' ,name:'姓名' ,address:'地点'}],
        tableData0:[{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableData1:[{
          date: '2017-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableData2:[{
          date: '2018-05-02',
          name: '李四',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableData3:[{
          date: '2019-05-02',
          name: '王五',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableData4:[{
          date: '2010-05-02',
          name: '哈哈',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
    };
  },
  mounted () {
  }
};
</script>
<style lang="scss" scoped>
.wrapper{}
</style>

2.子组件给父组件传值

2.1. $emit()

在父组件中引入一个子组件（按钮），点击子组件时，将子组件传来的值放到父组件中

新建一个子组件：

思路：在自组件中有一个按钮，点击按钮触发msgToFather事件，在msgToFather事件中通过this.$emit给父元素传值，this.$emit中第一个参数是父元素在子元素上绑定的事件，第二个参数是子元素给父元素传的值。

<template>
  <div class="wrapper">
    <el-button @click='msgToFather'>向父元素传值</el-button>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
        mes:"我是子元素给父元素的值"
    }
  },
  methods: {
      msgToFather(){
          this.$emit('getmsg',this.mes)
      }
  }
};
</script>

在父元素中接受子元素传来的值。

父组件：

思路：在父组件中引入子组件，在使用子组件的地方定义@getmsg=‘getMessage’在getMessage中接收子组件传来的值。

<template>
  <div class="wrapper">
    <Son @getmsg = "getMessage" />
    <p>子组件传来的值为：{{message}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
import Son from '@/views/test/son'
export default {
  components: { Son },
  data () {
    return {
        message:''
    };
  },
  methods:{
      getMessage(data){
          this.message = data
      }
  }
  
};
</script>
<style lang="scss" scoped>
.wrapper{
    padding:14px 15px;
}
</style>

点击按钮，像父元素传值:

2.2.ref

父元素中：

<template>
	<div>
		<General ref="general"/>
		<el-button @click='save'>获取子元素中的数据</el-button>
	</div>
</template>
<script>
export default {
	methods:{
		save() {
			console.log(this.$refs.general.form);//{a:'11',b:'22'}
		}
	}
}
</script>

子元素中

export default {
	data(){
		return: {
			form:{
				a:'11',
				b:'22'
			}
		}
	}
}