vue的组件创建和使用

2024-08-30 04:49:03

首先说一下vue组件

什么是组件？

　　在我的理解，vue的所有页面内容都是组件。

什么是父子组件？

　　因为所有的页面内容都是组件，那么怎么区分父子组件呢？其实很简单，现在有一个页面，在js里面的 components 创建的组件都是子组件，当然包括外部引入的组件都是叫做子组件。

在当前页面写的组件叫做父组件。

什么是插槽？

　　插槽是用来分发任务（或者说是分发内容的），可以理解为它是用来在子组件里面占位的，然后通过父组件来给插槽设置内容来进行显示。显示的位置就是子组件插槽的位置。（如果还不理解没有关系，接下来会有实例来说明）

当简单的了解这几个内容之后就可以开始实际操作了。

　组件分两种：

　　一种是内部组件，还有一种是外部组件。

　　　内部组件是只能用于当前页面，具有局限性，不能进行全局复用。

　　　外部组件更加灵活，并且具有全局性，可以全局复用。

　　　下面我们先来看一下内部组件的创建和使用：

　　　

　　　效果：

　　　

　　　接下来是外部组件的创建和使用：先来个简单的：先创建一个公共文件夹，用来放组件，然后创建一个组件（即一个vue文件）

　　　创建好组件之后在需要使用的页面去引入组件并且注册组件：

　　　

　　使用组件：

　　

　　效果图：

　　

　　接下来写一个效果组件：

　　

　　引入和注册组件：组件标签的名字还可以像这样写，直接拿导入的组件名作为标签，效果是一样的

　　

　　接下来是使用：

　　

·　　效果图：

　　

　　鼠标悬浮到这个组件上去效果：和预期是一样的，说明组件的样式等是可以生效的。

　　

　　

　　接下来是带插槽的组件，在上面说过插槽其实就是相当于用来在子组件中占空间给父组件来设置内容的

　　那看一下它到底是怎么样的。

　　步骤和上面的外部组件是差不多的。

　　先创建子组件：

　　

　　引入和组成子组件

　　

　　使用带插槽的子组件：

　　

　　效果图：

　　

　　哎，好像没有区别啊，当然啦，因为我还没有给插槽设置内容嘛，那应该怎么设置呢？其实很简单，在这个子组件的标签里面设置的内容就是插槽会显示的内容

　　

　这样在看效果有什么不同：

　　

　　效果不明显？没事，再来几个效果进行对比

　　

　在子组件里面的插槽添加一个内容，这样再看效果

　　

　　子组件的div里面的内容是在slot后面显示的，那就证实了slot 就是用来占位的了。当然它的作用可不仅仅是用来占位置，它的主要作用是用来分发任务（或者说是分发内容）

　　再看例：

　　

　　效果图：

　　　　

　　上面的是匿名插槽，如果我想指定内容到一个指定的插槽位置里面那应该怎么办呢？

　　为了解决这个问题，就有了具名插槽，具名插槽就是有名字的插槽的意思，有名字的话要指定内容就容易了。

　　看实例：创建一个具名插槽在name属性的值就是插槽的名字

　　

　　使用：注意，具名插槽使用的时候一定要把插槽名字写在最外面的标签，要保证插槽和子组件的 ying 标签保持父子关系，否则会被当成是匿名插槽来显示

　　

　　效果：

　　

　　上面两个插槽都不能进行数据传递，那么就有了区域插槽来解决这个问题

　　区域插槽（作用域插槽）：因为区域插槽可以用来处理父组件传递的数据，那么我们首先要做的是创建父级组件的数据

　　

　　在父组件的data里面创建一个数组数据，（模仿后端传递的数据）

　　接下来我们要将这个数据传递给子组件

　　

　　接下来我们再来设置子组件的区域插槽：

　　

　　接下来看效果：

　　

　　这样就能通过插槽来对父级组件的数据进行传递处理了。

　　好了，到这里相信你也会使用了。欢迎留言您的见解和指出错误，谢谢！

最新文章

热门文章