VUE-组件以及插槽

最新推荐文章于 2023-05-14 21:52:56 发布

WeChat624

最新推荐文章于 2023-05-14 21:52:56 发布

阅读量301

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_71879136/article/details/126993728

版权

本文介绍了Vue.js中组件的四种定义方式，包括使用Vue.extend、直接使用Vue.component、模板字符串定义以及template标签定义。详细讲解了全局和私有组件的创建，以及组件的数据、方法和生命周期。同时，文章探讨了组件动画的实现，如通过flag标识符和:is属性切换组件。最后，讨论了插槽的概念，包括默认插槽和具名插槽的使用，展示了如何通过插槽实现父组件内容在子组件中的定制化布局。

摘要由CSDN通过智能技术生成

一、全局组件定义的四种方式
1、使用 Vue.extend 配合 Vue.component 方法：
声明组件： var login = Vue.extend({template: '<h1>登录</h1>' });
   全局注册（名字、模板）： Vue.component('login', login);
在#app中渲染：<login></login>
2、直接使用 Vue.component 方法：
Vue.component('login',{template:"<h2> 2222</h2>"})
在#app中渲染：<login></login>
3、将模板字符串，定义到script标签中：
<script id="tmpl" type="x-template">
     <div><a href="#">登录</a> | <a href="#">注册</a></div>
   </script>
同时，需要使用 Vue.component 来定义组件：
   Vue.component('account', {