实现一个自定义组件,不同组件间如何通信的?

例:全局组件

<body>
<div id="app">
<my-comonpent></my-compinent>
</div>
<template id="myTemplate">
<div>
<h3>123</h3>
</div>
</template>
<script src="js/vue2.5.js"></script>
<script>
//将模板对象注册到组件中
vue.component("my-component",
{template:"#myTemplate"});
var vm=new vue({
el: "#app"
});
</script>
</body>

局部组件

<body>
<div id="app">
<my-comonpent></my-compinent>
</div>
<template id="myTemplate">
<div>
<h3>123</h3>
</div>
</template>
<script src="js/vue2.5.js"></script>
<script>
var vm=new vue({
el: "#app",
component:{
"my-component":{
{template:"#myTemplate"}
}
}
});
</script>
</body>

子组件中,data不再是一个对象,而是一个function,且这个function必须返回一个对象

<body>
<div id="app">
<my-comonpent></my-compinent>
</div>
<template id="myTemplate">
<div>
<p>{{msg}}</p>
</div>
</template>
<script src="js/vue2.5.js"></script>
<script>
vue.component("my-component",
{
template:"#myTemplate";
data:function(){
return{
msg:"1234"
}
}
});
var vm=new vue({
el: "#app"
});
</script>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以给你提供一个简单的示例,帮助你实现一个类似ElementUI加载组件自定义组件。 首先,你需要新建一个Vue组件。你可以在组件中添加一个包含加载动画的HTML元素。例如: ```html <template> <div class="loading-wrapper"> <div class="loader"></div> </div> </template> ``` 然后,你需要在组件中添加一些CSS样式,来制作加载动画。例如: ```css .loading-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; } .loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 最后,你需要在Vue组件中添加一些逻辑代码,来控制加载组件的显示和隐藏。例如: ```html <template> <div v-show="loading" class="loading-wrapper"> <div class="loader"></div> </div> </template> <script> export default { data() { return { loading: false } }, methods: { showLoading() { this.loading = true }, hideLoading() { this.loading = false } } } </script> ``` 现在,你就可以在其他Vue组件中使用这个自定义组件了。例如: ```html <template> <div> <my-loading v-show="isLoading"></my-loading> <button @click="fetchData">点击加载数据</button> </div> </template> <script> import MyLoading from './MyLoading.vue' export default { components: { MyLoading }, data() { return { isLoading: false } }, methods: { fetchData() { this.isLoading = true // 发送请求获取数据 // 请求完成后隐藏加载组件 this.isLoading = false } } } </script> ``` 以上就是一个简单的自定义加载组件实现示例。你可以根据自己的需求,对这个示例进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值