vue子组件与父组件通信

标签：imp   creat   val   ref   let   data   auto   url   child   

父组件

<template>
<div class="login">
<div class="main clearfix">
<div style="width:100%;height:60px;border:0px solid rosybrown">
<Search :reuqestData="reuqestData" :pageParams="pageParams" :pageSizeOpts="pageSizeOpts" :placeholder="placeholder" ref="child" @itemClick="itemClick"></Search>
</div>
</div>
</div>
</div>
</template>

<script>
import Search from ‘@/components/search‘
export default {
name: ‘Login‘,
components: {
Search
},
data () {
return {
msg: ‘Welcome to Your LiveList‘,
livelist:[],
title:‘‘,
status:true,
currentPage: 1,
pageSize: 10,
pageSizeOpts: [10, 15,20],
placeholder:‘请输入标题‘,
pageParams:{
currentPage: 1,
pageSize: 10,
pageSizeOpts: [10, 15,20,30],
},
total:0,
imageServer:this.imageServer,
reuqestData:{
url:‘/admin/listmvideo/‘,
params:{
title:‘‘,
cid:12,
uploadType:‘all‘
}
}
}
},
created(){
var that=this;
//that.getLiveList();
},
methods: {
itemClick(data){
alert(data.name);
},
get:function (event) {
var that=this;
console.log(that.title);
//限制频繁请求
that.status=true;
that.searchLive()
/**if(this.status){
setTimeout(function(){

},100)
}*/
},
setStatus:function(event){
var that=this;
console.log(that.title+"-------");
that.status=false;
},

goVideoDetailFn(item){
this.title=item.name+item.id;
},
getLiveList(){
var that=this;
let datalist = [];
let param = {
page: that.currentPage,
size: that.pageSize,
title: that.title,
cid: ‘0‘,
status:‘all‘
};
that.$http.get("/admin/listmlive/", {
params: param
}).then(function(res) {
console.log(res);
if(res.data.status == ‘yes‘) {
var list = res.data.livelist;
for(let i = 0; i < list.length; i++) {
datalist.push(list[i]);
}
} else {
datalist = [];
}
that.total= res.data.count;
that.livelist=datalist;
}).catch(function(err) {
console.log(err)
})
}
}
}
</script>

子组件

<template>
<div class="search-items">
<div class="search-area">
<div class="search-filter" style="width:100%;height:36px;border:1px solid rosybrown">
<input class="search-input" id="search-input" v-model="title" :placeholder="placeholder"
@input="delayGet($event)" @keydown="setStatus($event)" type="text" autocomplete="off">
<ul style="width:100%;height:auto;border:1px solid rosybrown" v-if="showState">
<li v-for="(item, i) in datalist" @click="goDetailFn(item)">{{item.name}}</li>
<div v-if="datalist.length>0">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizeOpts"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<p v-if="datalist.length==0" class="nodata-info">{{noDataMsg+reuqestData.url}}</p>
</ul>
</div>
<div class="showhide-search" @click="searchList()"></div>
</div>
</div>
</template>

<script>
export default {
name: ‘search‘,
props: {
noDataMsg: {
type: String,
default: ‘抱歉哦，没有您查找的数据 !‘
},
reuqestData:{
type:Object,
default:()=>{}
},
pageSizeOpts:{
type:Array,
default:()=>[]
},
placeholder:String,
nodatatext:String,
pageParams:{
type:Object,
default:()=>{}
}
},
data(){
return {
title:‘‘,
datalist:[],
currentPage:1,
pageSize:10,
showState:true,
total:0,
}
},
created(){
var that=this;
console.log(that.pageParams)
console.log(that.reuqestData)
that.getLiveList();
},
methods:{
delayGet(){
console.log(‘-----delayget-----‘);
if(this.resizeTimer){
clearTimeout(this.resizeTimer);
this.resizeTimer=null;
}
this.resizeTimer=setTimeout(this.get,500);
},
get:function (event) {
console.log(‘-----1-----‘);
var that=this;
console.log(that.title);
//限制频繁请求
that.showState=true;
that.searchLive()
/**if(this.status){
setTimeout(function(){

},100)
}*/
},
setStatus:function(event){
var that=this;
console.log(that.title+"-------");
that.status=false;
},
searchLive(){
var that=this;
that.currentPage=1;
that.getLiveList();
},
getLiveList(){
var that=this;
let datalist = [];
let param = {
page: that.currentPage,
size:that.pageSize,
cid: ‘0‘,
title: that.title,
status:‘all‘,
uploadType: ‘all‘
};
that.$http.get(this.reuqestData.url, {
params: param
}).then(function(res) {
console.log(res);
if(res.data.status == ‘yes‘) {
var list = res.data.videolist;
for(let i = 0; i < list.length; i++) {
datalist.push(list[i]);
}
} else {
datalist = [];
}
that.total= res.data.count;
that.datalist=datalist;
console.log("------"+that.datalist);
}).catch(function(err) {
console.log(err)
})
},
goDetailFn:function(data){
this.showState=false;
this.title=data.name;
this.$emit(‘itemClick‘,data);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
var that=this;
that.pageSize=val;
that.currentPage=1;
that.getLiveList();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
var that=this;
that.currentPage=val;
that.getLiveList();
},
}
}
</script>

vue子组件与父组件通信

标签：imp   creat   val   ref   let   data   auto   url   child   

原文地址：https://www.cnblogs.com/xmyfsj/p/12056954.html