<template>
<div id="app">
<LoadingButton @click="handlesClick"></LoadingButton>
<ceShi2></ceShi2>
</div>
</template>
<script>
import LoadingButton from '@/components/demo/LoadingButton'
import ceShi2 from '@/components/demo2/index.vue'
export default {
name: 'App',
components: {
LoadingButton,ceShi2
},
methods:{
//目的:父组件向子组件发起通信,父组件完成后,子组件在进行执行
//第一种使用$emit来形成通信方式
// handlesClick(count,callback){
// console.log(count)
// setTimeout(()=>{
// callback("请填写账号")
// },3000)
// }
//第二种使用$listeners
async handlesClick(count){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve('成功次数:'+ count)
},1000)
})
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<div>
<button @click="handleClick" :disabled="isLoading">
{{ isLoading ? "loading" : "submit" }}
</button>
<div class="err">{{ error }}</div>
</div>
</template>
<!--
实现子组件向父组件发起通信,父组件完成通信后,子组件在向下执行
第一种方法:使用$emit()多个参数,整个回调函数,然后在父组件完成后,进行回调
第二种方法:使用$listeners
$emit和$listeners区别:
$emit符合单向数据流,子组件发出通知,父组件监听;$listeners在子组件直接使用父组件的方法(类似与函数)
$emit受调试工具监控$listeners不受调试工具监控
$listeners获取传递过来方法,因此调用方法可以知道返回值。但是$emit仅仅向父组件发送通知,操作都是由父组件完成,子组件无法进行参与,也就不知道父元素处理的结果,除非父元素返回结果
-->
<script>
export default {
data() {
return {
count: 0,//点击次数
isLoading: false,
error: 'aaa',
}
},
methods: {
//第一种使用$emit来形成通信方式
// handleClick(){
// /*点击次数 +1
// 错误消息清空
// 为了防止重复点击,将isloading设置true
// 通知父组件,{我被点击了},并传递当前点击次数
// 等待父组件处理(可能是异步),将父组件处理结果设置到error
// */
// this.count++;
// this.error='';
// this.isLoading=true;
// this.$emit('click',this.count,(error)=>{
// this.isLoading=false;
// this.error= error
// });
//第二种使用$listeners来形成通信方式
async handleClick() {
/*点击次数 +1
错误消息清空
为了防止重复点击,将isloading设置true
通知父组件,{我被点击了},并传递当前点击次数
等待父组件处理(可能是异步),将父组件处理结果设置到error
*/
this.count++;
this.error = '';
this.isLoading = true;
const result = await this.$listeners.click(this.count);
this.isLoading = false;
this.error = result;
}
}
}
</script>
<style></style>
v-model:实现数据双向绑定