Vue学习（12）组件基础

基本示例

<div id="app">
    <button-counter></button-counter>
</div>
<script>

    Vue.component('button-counter', {
        data() {
            return {
                count: 0
            }
        },
        template: '<button @click="count++">点击了{{count}}次</button>'
    })

    new Vue({
        el: '#app'
    })
</script>

效果：

组件的复用

可以将组件进行任意次数的复用：

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
效果：

通过 Prop 向子组件传递数据

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

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

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来。

prop示例1

<div id="app">
    <blog-post title="新闻标题1"></blog-post>
    <blog-post title="新闻标题2"></blog-post>
    <blog-post title="新闻标题3"></blog-post>
</div>
<script>

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

    new Vue({
        el: '#app'
    })
</script>

效果：

prop示例2

<div id="app">
    <blog-post
            v-for="post in posts"
            :key="post.id"
            :post="post"
    ></blog-post>
</div>
<script>
    Vue.component('blog-post', {
        props: ['post'],
        template: `
          <div>
          <h3>{{ post.title }}</h3>
          <div v-html="post.content"></div>
          </div>
        `
    })

    new Vue({
        el: '#app',
        data() {
            return {
                posts: [
                    {id: 1, title: '新闻标题1',content:'这是测试的新闻内容1。<a href="#">百度</a></p>'},
                    {id: 2, title: '新闻标题2',content:'<h5>这是测试的新闻内容2。</h5>'},
                    {id: 3, title: '新闻标题3',content:'<p>这是测试的新闻内容。

这是<b>测试</b>的新闻内容。</p>'},
                ]
            }
        }
    })
</script>

效果：

监听子组件事件

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

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

示例：

<div id="app">
    <blog-post
            v-for="post in posts"
            :key="post.id"
            :post="post"
            :fontsize="postFontSize"
            @increase-fontsize="postFontSize += 0.1"
            @decrease-fontsize="postFontSize -= 0.1"
    ></blog-post>
</div>
<script>
    Vue.component('blog-post', {
        props: ['post','fontsize'],
        template: `
          <div>
              <h3>{{ post.title }}</h3>
              <button @click="$emit('increase-fontsize')">增大字号</button>
              <button @click="$emit('decrease-fontsize')">减小字号</button>
              <div v-html="post.content" :style="{ fontSize: fontsize + 'em' }"></div>
          </div>
        `
    })

    new Vue({
        el: '#app',
        data() {
            return {
                posts: [
                    {id: 1, title: '新闻标题1', content: '<p>这是测试的新闻内容1。<a href="#">百度</a></p>'},
                    {id: 2, title: '新闻标题2', content: '<h5>这是测试的新闻内容2。</h5>'},
                    {id: 3, title: '新闻标题3', content: '<p>这是测试的新闻内容。

<p>这是<b>测试</b>的新闻内容。</p>'},
                ],
                postFontSize: 1
            }
        },
    })
</script>