Vue.component('son-item', Vue.extend({ template: '#son-item', props: { tableData: Array }, methods: { onModifyClick () { // 子组件内部改变了 prop(且是引用类型的引用),所以 vue 会给出警告。 this.tableData = [] // 如果只是像下面这样去改变(原数组引用地址未变),则不会触发 Vue 警告。 // this.tableData.shift() console.log('@Child Call onModifyClick Func') console.log(this.tableData) }, onUpdateClick () { // 以下操作也变更了 prop数据,但未曾涉及修改及数据内容的引用,所以不会触发Vue warn // this.$set(this.tableData[0], 'name', 'jeffjade.com') // this.$set(this.tableData[0], 'date', '2017-03-13') // 赋值操作会调用这个属性的set方法,所以会让Vue有所感知,以驱动视图更新。 this.tableData[0]['name'] = '晚晴幽草轩' this.tableData[0]['date'] = '2017-03-12' this.tableData[0]['address'] = '中国.深圳.南山' //以下这种方式,虽然数据会变更,但不会触发Vue Warn,但也不会出发Vue感知从而更新视图。 /* this.tableData[0] = { date: '2017-03-12', name: '晚晴幽草轩', address: '深圳.南山' } console.log(this.tableData) */ }, onChangeDataByParentClick () { this.$emit('change-params', ) } } })); new Vue({ el: '#app', data() { return { tableData: [{ date: '2016-05-02', name: 'Jade', address: 'China' }, { date: '2016-05-04', name: 'Rayso', address: 'Cambridge' }, { date: '2016-05-01', name: 'Scarlett', address: 'New York' }] } }, methods:{ handelChangeParams () { this.tableData.shift() console.log('@parent handelChangeParams Func') console.log(this.tableData) } } });
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui/lib/index.js"></script> <div id="app"> <son-item :table-data="tableData" @change-params="handelChangeParams"></son-item> <script type="x-template" id="son-item"> <div class="son-root"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> <p class="gap-space"></p> <el-button type="warning" size="small" class="btn-width" @click.prevent="onModifyClick();">Change Reference </el-button> <el-tag type="danger">With Vue Warn</el-tag> <p class="gap-space"></p> <el-button type="success" size="small" class="btn-width" @click.prevent="onUpdateClick">Change Content </el-button> <el-tag type="success">Not Any Warn</el-tag> <!-- Update data through parent component method --> <p class="gap-space"></p> <el-button type="success" size="small" class="btn-width" @click.prevent="onChangeDataByParentClick">Change Reference </el-button> <el-tag type="success">Not Any Warn</el-tag> <el-tag type="gray">Update data through parent component method</el-tag> </div> </script> </div>
@import url("//unpkg.com/element-ui/lib/theme-default/index.css"); .gap-space { margin: 15px auto; } .btn-width { width: 120px; }