vue.js框架快速入门简明教程(六)（组件）

假如我们写了一段html代码，如果想要在其他地方调用这这块代码块，我们只能复制多一段，这样无疑是最笨的方法，使得程序变得缓慢不说，如果我想统一修改代码块上的某个元素，就得全部修改一次，真的是蠢到家了有木有。幸好有了Vue.js，把前端程序员从愚蠢繁杂的工作中拯救了出来。
Vue.js为什么那么伟大？这篇文章将带大家去探讨一下Vue.js的强大之处。
一、什么是Vue组件？Vue.js组件是Vue.js 最强大的功能之一。Vue.js组件可以扩展HTML元素，什么意思呢？就是为html新增标签，就像html5那样加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等。而Vue.js组件扩展HTML的元素是你为该项目注册的。此外Vue.js可以封装可重用的代码，在需要的之后只需要直接引入就可以。来看看注册Vue.js组件。
二、Vue.js组件中的全局组件和局部组件就像javascript定义变量，Vue.js组件注册也有区分全局和局部组件。
1、全局组件
全部组件就是可以在任意Vue.js示例下使用的，在Vue.js中调用Vue.js.component()注册的组件是全局的。
注册一个全局组件语法格式如下：
Vue.js.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
< tagName> < /tagName>
例如：把id=template1中的模版插入到已经注册的goodnight组件中。

< div id="app"> < goodnight>< /goodnight> < goodnight>< /goodnight> < goodnight>< /goodnight> < /div>< template id="template1"> < div> < h3>goodnight< /h3> < button id="btn">Submit< /button> < /div> < /template>< /body> < script> // 注册 Vue.component('goodnight', { template: '#template1' }) // 创建根实例 new Vue({ el: '#app' }) < /script>

文章图片
2、局部组件
如果在实际项目中不需要全局注册，或者是想让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。
例如：模版只能在goodnight里面用，在good组件是用不了的。

< div id="app"> < goodnight>< /goodnight> < goodnight>< /goodnight> < good>< /good> < /div>< template id="template1"> < div> < h3>goodnight< /h3> < button id="btn">Submit< /button> < /div> < /template>< /body> < script>var template1 = { template: '#template1' } // 注册 // 创建根实例 new Vue({ el: '#app', components:{ 'goodnight': template1, } }) < /script>

文章图片
另外，Vue.extend 是构造一个组件的构造器。充分说明了Vue.js的组件使用规则和原理，设置模板，向模板填充数据并渲染。
用于Vue.js组件的局部注册。简单的理解为Vue.extend创建的组件会自动添加到自定义的元素上。

文章图片
用法：Vue.extend ( options )，options 是对象；

例如： < div id="extend1">< /div>var extend1=Vue.extend({ template:'< h1>{{myname}}< /h1>', data(){ return { myname:'vue.js局部组件使用' } }})var extend2=new extend1(); extend2.$mount('#extend1')

三、自定义属性prop组件实例之间的作用于是独立的，相互之间不能进行数据的传递，那如果一个子组件需要应用父组件的数据，应该如何来进行数据传递呢？在Vue.js中，可以通过设置父组件的属性prop，自定义地把数据传递给子组件。
例如：

< div id="app"> < my-component message="hello" name="vue.js" age="18">< /my-component> < /div>< /body> < script>Vue component('my-component', { // 声明 props props: ['message','name','age'],data:function(){ return { message1:this.message, name1:this.name, age1:this.age } }, template: '< span>大家好，我是{{ name1}},今年{{age1}}< /span>' })// 注册 // 创建根实例 new Vue({ el: '#app',}) < /script>

文章图片
其实props是收取父组件的数据，并且可以通过实例创建子组件的方式传递给子组件并渲染模版。prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态而发生数据错误。
四、自定义事件那在实际项目中，是需要把子组件要把数据传递回去给父组件，那怎么办？不是说props是单向绑定的吗？这时候，就不用prop 了，子组件要把数据传递给父级依靠自定义事件。 $on(eventName) 监听事件
和 $emit(eventName) 触发事件例如：

< div id="app"> < button @click="add">{{night}}< /button> < /div>< /body> < script> var app=new Vue({ el:"#app", data:{ night:"晚上好" }, methods:{ add:function(){ this.$emit('text','我睡了'); }} }); app.$on('text',function(value){ console.log(value); })< /script>