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、熟练使用组件进行传值
