vue 组件回调

来源：互联网发布：谈谈大数据金融行业应编辑：程序博客网时间：2024/06/05 01:14

场景是这样的

去看下一下的代码我只说重点

重点是 tableList.vue 里的 this.$emit("aaa",["11"]) 里 aaa 指的是 index.html 绑定的 v-on:aaa

至于后面的="a1" 就是你父组件里面的回调方法了

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>无标题文档</title> <link rel="stylesheet" href="../../../../public/admin/css/admin.css" /></head>    <body>  <div id="app"><tablelist :data='tableData()' v-on:aaa="a1" ></tablelist></div><script type="text/javascript" src="../../../../public/admin/js/commom/commom.js"></script><script type="text/javascript" src="../../../../public/admin/js/demo/index.js"></script>  </body>  </html>

tableList.vue

<template><div class="layui-form">{{data}}    <table class="layui-table" @click="ok">    <thead>      <tr>        <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>        <th>人物</th>        <th>民族</th>        <th>出场时间</th>        <th>格言</th>      </tr>     </thead>    <tbody>      <tr>        <td><input type="checkbox" name="" lay-skin="primary"></td>        <td>11</td>        <td>11</td>        <td>11-10-14</td>        <td>人生似修行</td>      </tr>    </tbody>    </table></div></template><script>module.exports={ props: ['data'],methods:{    ok:function(){    alert("1")    this.$emit("aaa",["11"])    }    }//data:function(){ //return { gree:"hello"}//}}</script><style></style>

index.js

//以下是引用控件的方法import tablelist from '../module/tableList.vue';new Vue({el: '#app',components:{tablelist    },    data:{    tableData:function(){    return 1    }    },    methods:{    a1:function(res){    console.log(res)    debugger    }    }        });

阅读全文

0 0