vue组件

组件（compoent）是vue最强大的功能之一。

称之为元素，组件可以扩展HTML中的元素，封装可重用的代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zEKCGko6-1604129087137)(C:\Users\DELL\AppData\Local\Temp\1564645532592.png)]

如何注册一个全局组件：

语法：Vue.compoent(tagName,Options)

tagName就是组件名，Options是配置的选项，用一下方式调用组件

语法：

全局组件

所有实力都可以用到全局组件

<body>
    <div id="app">
      <aaa></aaa>
    </div>
    <script>
      //注册
      Vue.component('aaa',{
        template:'<h1>这就是我自定义的全局组件</h1>'
      })
      //创建实例
      new Vue({
        el:"#app"
      })
    </script>
  </body>

局部组件

<body>
    <div id="app">
      <aaa></aaa>
    </div>
    <script>
      var child ={
        template:'<h1>我是局部组件</h1>'
      }
      //创建实例
      new Vue({
        el:"#app",
        components:{
          aaa:child
        }
      })
    </script>
  </body>

prop

prop 是父组件用来传递数据的一个自定义的属性

父组件通过prop把数据传递给子组件，子组件就需要显示的方式声明“prop”

<body>
    <div id="app">
      <child msg = "hello"></child>
    </div>
    <script>
      Vue.component('child',{
        //声明props
        props:['msg'],
        //可以在vm实例中进行像“this.message”这样的使用
        template:'<span>{{msg}}</span>'
      })
      new Vue({
        el:'#app'
      })
    </script>
  </body>

动态prop

类似于用v-bind绑定HTML特性的一个表达式，我们也可以用v-bind动态绑定prop的值到我们的父组件的数据中。

<body>
    <div id="app">
      <div>
        <input v-model="parentMsg" /><br />
        <child v-bind:message="parentMsg"></child>
      </div>
      <script>
        Vue.component('child',{
          props:['message'],
          template:'<span>{{message}}</span>'
        })

        //创建实例
        new Vue({
          el:'#app',
          data:{
          parentMsg:'父组件内容' 
          }
        })
      </script>
    </div>
  </body>

自定义事件

父组件是使用props传递数据给子组件，子组件想要把数据传递回去，就需要我们自定义事件

使用v-on指令绑定自定事件

$on(eventName)监听事件

$emit(eventName)触发事件

<body>
      <div id="app">
        <div id="counter-event-example">
          <p>{{ total }}</p>
          <button-counter v-on:increment="incrementTotal"></button-counter>
          <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
      </div>

      <script>
      Vue.component('button-counter', {
        template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
        data: function () {
          return {
            counter: 0
          }
        },
        methods: {
          incrementHandler: function () {
            this.counter += 1
            this.$emit('increment')
          }
        },
      })
      new Vue({
        el: '#counter-event-example',
        data: {
          total: 0
        },
        methods: {
          incrementTotal: function () {
            this.total += 1
          }
        }
      })
      </script>
      </body>

回顾：

1、注册一个全局的组件

2、注册局部组件

3、props父组件对子组件传值

4、自定义事件，子组件像父组件传值

作业：

1、搞清楚什么是组件，并熟练使用祖册全局组件和局部组件

}
      }
    })
    </script>
    </body>
## 回顾：

1、注册一个全局的组件

2、注册局部组件

3、props父组件对子组件传值

4、自定义事件，子组件像父组件传值

## 作业：

1、搞清楚什么是组件，并熟练使用祖册全局组件和局部组件

2、熟练使用组件进行传值