vue 组件回调

最新推荐文章于 2024-01-27 17:27:48 发布

雪狼之夜

最新推荐文章于 2024-01-27 17:27:48 发布

阅读量8.1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/xuelang532777032/article/details/72833753

版权

vue 专栏收录该内容

104 篇文章 5 订阅

订阅专栏

场景是这样的

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

重点是 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
    	}
    }
    
    
});

雪狼之夜

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue 组件回调

场景是这样的去看下一下的代码我只说重点重点是 tableList.vue 里的 this.$emit("aaa",["11"]) 里 aaa 指的是 index.html 绑定的 v-on:aaa 至于后面的="a1" 就是你父组件里面的回调方法了index.html 无标题文档
复制链接

扫一扫