renderone.js

import Vue from 'vue';
let ProfileHandle = Vue.extend({
props: {
inputInfo: '',
},
data() {
return {
inputValue:'',
}
},
template: <div class="seven-block"> <div>{{inputInfo}}</div> <input type='text' placeholder="請輸入" v-model="inputValue" @blur="changeDate" /> <div>{{inputValue}}</div> </div>,
mounted() {
},
watch:{
},
methods:{
changeDate(value){
}
}
});
export default ProfileHandle;

tablelist.vue

...
<template>
<div style="">
<Table :columns="columns1" :data="data1"></Table>
</div>
</template>
<script>
import renderone from './renderone.js';
import Vue from 'vue';
// 1.創(chuàng)建組件
let Profile = Vue.extend({
props: {
inputInfo: '',
},
data() {
return {
inputValue:'',
}
},
template: <div class="seven-block"> <div>{{inputInfo}}</div> <input type='text' placeholder="請輸入" v-model="inputValue" @blur="changeDate" /> <div>{{inputValue}}</div> </div>,
mounted() {
console.log(renderone)
},
watch:{
},
methods:{
changeDate(value){
// console.log(value)
}
}
});

// 2.注冊組件，指定組件的名稱
Vue.component('my-date', Profile);
Vue.component('myDate', renderone);
export default {
name:'tableList',
data () {
return {
columns1: [
{
title: 'Name',
key: 'name',
minWidth:100,
},
{
title: 'Age',
key: 'age',
minWidth:100,
},
{
title: 'Address',
key: 'address',
minWidth:300,
render: (h, params) => {
return h('my-date', {
on:{
// 監(jiān)聽子組件的changeinfoValue事件
changeinfoValue(value){
console.log(value)
}
},
props:{
inputInfo:params.row.age //傳參數(shù)給子組件
}});
}
},
{
title: 'Address',
key: 'address',
minWidth:300,
render: (h, params) => {
return h('myDate', []);
}
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
}
}
</script>

<style>
</style>
...