Vue 组件传导主函数中的data

若组件中的模板

var Bar = Vue.extend({ template: `<div></div>` ,
        props: ["data1"],
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            formatter(row, column) {
                return row.protein_2;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
        },
    });

需要用到主函数

var vm = new Vue({
        el:"#app",
        data: {
            tableData:[{
            protein_1:'1',
            protein_2:'2',
            tag:'3'},],
            //tableData:[],
            activeIndex: '1',
            activeIndex2: '1',
            al:'1',
            userProfile:{
                name:'Anika'
            },
        },
        methods:{
            formatter(row, column) {
                return row.protein_2;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
        },
        router,
    })

里的data，需要使用“prop”，
定义

props: ["data1"]

在组件复用标签或路由标签声明

<router-view v-bind:data1="tableData"></router-view>

在模板外使用数据用

<p>{{data1[0].protein_2}}</p>

在模板内使用

<el-table  v-bind:data="data1" style="width: 100%;">

其中"data1"，“tableData”，“protein2” 是自己命名的变量名