Vue组件基本示例

基本示例

下面是一个Vue组件的例子：

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是具有名称的可重用Vue实例：在本例中，<button-counter>. 我们可以将此组件用作使用以下方法创建的根Vue实例中的自定义元素new Vue：

<div id="components-demo">
  <button-counter></button-counter>
</div>

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

由于组件是可重复使用Vue的情况下，他们接受相同的选项new Vue，如data，computed，watch，methods，和生命周期挂钩。唯一的例外是一些特定于 root 的选项，例如el.

重用组件

组件可以根据需要多次重复使用：

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

请注意，当单击按钮时，每个按钮都维护着自己的、单独的count. 这是因为每次使用组件时，都会创建它的一个新实例。

组织组件

应用程序被组织成嵌套组件树是很常见的。

例如，您可能有用于标题、侧边栏和内容区域的组件。

要在模板中使用这些组件，必须注册它们，以便 Vue 知道它们。有两种类型的组件注册：global和local。到目前为止，我们只在全局注册了组件，使用Vue.component：

Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以new Vue在之后创建的任何根 Vue 实例 ( )的模板中使用——甚至可以在该 Vue 实例的组件树的所有子组件中使用。

使用 props 将数据传递给子组件

道具是您可以在组件上注册的自定义属性。当一个值被传递给一个 prop 属性时，它成为该组件实例上的一个属性。要将标题传递给我们的博客文章组件，我们可以使用props选项将其包含在此组件接受的 props 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一个组件可以有任意多的 props，默认情况下，任何值都可以传递给任何 props。在上面的模板中，您将看到我们可以在组件实例上访问此值，就像使用data.

注册道具后，您可以将数据作为自定义属性传递给它，如下所示：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

单个根元素

在构建<blog-post>组件时，您的模板最终将不仅仅包含标题：

<h3>{{ title }}</h3>

至少，您需要包含帖子的内容：

<h3>{{ title }}</h3>
<div v-html="content"></div>

但是，如果您在模板中尝试此操作，Vue 将显示错误，说明每个组件都必须有一个根元素。您可以通过将模板包装在父元素中来修复此错误，例如：

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

监听子组件事件

在我们开发<blog-post>组件时，某些功能可能需要与父组件进行通信。例如，我们可能决定包含一个辅助功能来放大博客文章的文本，同时将页面的其余部分保留为默认大小：

在父级中，我们可以通过添加postFontSize数据属性来支持此功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

带插槽的内容分发

就像 HTML 元素一样，能够将内容传递给组件通常很有用，如下所示：

<alert-box>
  Something bad happened.
</alert-box>

这可能会呈现如下内容：

幸运的是，这个任务通过 Vue 的自定义<slot>元素变得非常简单：

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

正如您将在上面看到的，我们只是将插槽添加到我们想要它去的地方——就是这样。我们完成了!

以上就是极悦小编介绍的"Vue组件基本示例"，希望对大家有帮助，想了解更多可查看编程入门教程。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。