vue3使用vue2组件



'

})

new Vue({ el: '#components-demo3' })

/script>

通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：

和

。至此，我们的组件都只是通过 全局注册的：

全局注册的组件可以用在其被注册之后的任何 (通过 ) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 选项将其包含在该组件可接受的 prop 列表中：

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：

然而在一个典型的应用中，你可能在 里有一个博文的数组：

并想要为每篇博文渲染一个组件：

如上所示，你会发现我们可以使用 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。

当构建一个 组件时，你的模板最终会包含的东西远不止一个标题：

最最起码，你会包含这篇博文的正文：

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道

。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

看起来当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦：

所以是时候重构一下这个 组件了，让它变成接受一个单独的 prop：

现在，不论何时为 对象添加一个新的 property，它都会自动地在 内可用。

在我们开发 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 数据 property 来支持这个功能：

它可以在模板中用来控制所有博文的字号：

现在我们在每篇博文正文之前添加一个按钮来放大字号：

问题是这个按钮不会做任何事：

当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM 事件一样通过 监听子组件实例的任意事件：

同时子组件可以通过调用内建的

方法并传入事件名称来触发一个事件：

有了这个 监听器，父级组件就会接收该事件并更新 的值。

有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 组件决定它的文本要放大多少。这时可以使用 的第二个参数来提供这个值：

然后当在父级组件监听这个事件的时候，我们可以通过 访问到被抛出的这个值：

或者，如果这个事件处理函数是一个方法：

那么这个值将会作为第一个参数传入这个方法：

自定义事件也可以用于创建支持 的自定义输入组件。记住：

等价于：

当用在组件上时， 则会这样：

为了让它正常工作，这个组件内的 必须：

写成代码之后是这样的：

现在 就应该可以在这个组件上完美地工作起来了：

到目前为止，关于组件自定义事件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把自定义事件读完。

和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：

可能会渲染出这样的东西：

幸好，Vue 自定义的 元素让这变得非常简单：

如你所见，我们只要在需要的地方加入插槽就行了——就这么简单！

到目前为止，关于插槽你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把插槽读完。

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

上述内容可以通过 Vue 的 元素加一个特殊的 attribute 来实现：

在上述示例中， 可以包括

你可以在这里查阅并体验完整的代码，或在这个版本了解绑定组件选项对象，而不是已注册组件名的示例。

请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute

。对于像 这样的 property，若想让其如预期般工作，你需要使用 修饰器。

到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态和异步组件读完。

有些 HTML 元素，诸如 、、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 、 和 ，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 attribute 给了我们一个变通的办法：

需要注意的是

：

到这里，你需要了解的解析 DOM 模板时的注意事项——实际上也是 Vue 的全部

，大概就是这些了。恭喜你！接下来还有很多东西要去学习，不过首先，我们推荐你先休息一下，试用一下 Vue，自己随意做些好玩的东西。

如果你感觉已经掌握了这些知识，我们推荐你再回来把完整的组件指南，包括侧边栏中组件深入章节的所有页面读完。

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/9258.html