Vue.js（四）

欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot

组件

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。

我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。


// 定义一个名为 button-counter 的新组件
Vue.component('button-counter',{
  data: function () {	//一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

<div>
  <button-counter></button-counter>
</div>

通过 Prop 向子组件传递数据（传递组件数据）

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
我们能够在组件实例中访问这个值。


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

<blog-post title="My journey with Vue"></blog-post>

使用 v-bind 来动态传递 prop（传递 data 数据）

new Vue({
  el: '#blog-post',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
    ]
  }
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title">	//如果不加v-bind，"post.title"会被当做字符串，而不是表达式
</blog-post>


重构：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post">
</blog-post>

Vue.component('blog-post',{
  props: ['post'],
  template: `
    		<div>
      			<h3>{{ post.title }}</h3>
     			<div v-html="post.content"></div>
   			</div>
  			`
});

子组件向父组件传值

new Vue({
  el: '#blog-post',
  data: {
    postFontSize: 1
  }
});


<blog-post v-on:enlarge-text="postFontSize += 0.1"></blog-post>


Vue.component('blog-post',{
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')"></button>
      <div v-html="post.content"></div>
    </div>
  `
})


父级组件会接收该事件并更新 postFontSize 的值。

子组件向父组件传值-携带参数

   <menu-item :parr='parr' @enlarge-text='big($event)'></menu-item>

   Vue.component('menu-item',{
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
        </div>
      `
    });

    var vm = new Vue({
      el: '#app',
      data: {
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        big: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }
    });

通过插槽分发内容

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

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