vue 组件回调

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

雪狼之夜

8146人浏览 · 2017-06-01 18:05:09

雪狼之夜 · 2017-06-01 18:05:09 发布

场景是这样的

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^