vue---day07---组件基础

组件基础

这里写的官网上的例子。

        <div id="app">
            <mybutton></mybutton>
        </div>
        <script>
            Vue.component("mybutton", {
                data:function () {
                    return {
                        count:0
                    }
                  },
                  template:"<button v-on:click='count++'>have been click {{count}} times</button>"
            })
            var vm = new Vue({
                el:"#app"
            })
        </script>

这里感觉组件就是一个独立出来的Vue实例，它可以完成Vue实例做的任何事情，而且可以复用。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。（用一次组件，就会有一个它的新实例被创建。）
这种特性用来写成一个一个功能的组件再在网页上进行组合，就显得很是方便了。

值得注意的是，这里每一个组件都需要函数来创建，原因是如果是直接data：{count：0}这样的话，每次使用组件都会使得这些组件共享这一个变量而不是每个组件独自拥有一个count这样的属性。

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

这里组件的名称尽量避免大写

        <div id="app">
            <mytitle Mestitle="Hello"></mytitle>
        </div>
        <script>
            Vue.component("mytitle",{
                props:["Mestitle"],
                template:"<h1>{{Mestitle}}</h1>"
            })
            var vm = new Vue({
                el:"#app"
            })
        </script>

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

监听子组件事件

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})
<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>

这里可以看到Vue实例的postFontSize控制其字体字号。

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

而在使用组件的时候将事件enlarge-text进行监听

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

而组件内通过$emit（方法名称）来传入方法名称，以使得父类组件可以监听子类组件的事件而做出响应。

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

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

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

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

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

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

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

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}