超简单的Vue.js组件入门
Vue组件
什么是vue组件?
在vue开发中,为了能让一些页面中的元素使用性和复用性更高我们可以将一些html元素封装成可用的一些组件或者是模板。然后通过嵌套的方式进行在页面中嵌套使用,实现一种积木式编程。
如何使用vue组件?
通过Vue.extend()声明组件
Vue.extend是vue提供出来给我们实现组件的函数
//组装组件(声明组件)
var MyComponent = Vue.extend({
//被封装的html内容
template: '<div>This is your first vue components!</div>',
//绑定在这个组件内的数据
data: '',
//监听这个组件的事件的方法
methods: '',
//属性,通常被用来进行数据的通信
props: ''
});
注册组件——向vue核心容器注册这个组件
这是为了让vue更好的管理组件(复用和删除)
Vue.component('my-component', MyComponent);
//注册组件,传入别名(my-component)和组件名称(MyComponent)
初始化Vue.js的管理边界
var vm = new Vue({
el: '#app',
});
装入组件
在页面中嵌入
<div id="app">
<my-component></my-component>
</div>
简单四步,完成一个组件的装载流程 :)
已经与Vue.js组件打了个照面,该问问它点什么了
Q1: 组件化除了视图复用性更高以外的特殊作用?
让一个组件具有自身独立的功能——模块化!>_<!!!Q2: 如何在组件中进行js事件的绑定以及数据绑定?
var MyComponent = Vue.extend({
template: '<p></p>',
methods: {
searchList: function() {
console.log('Your cause an event!');
},
},
ready: function() { //在模块准备就绪时触发
console.log("Loading Complete!");
},
data: function() { //这里进行数据绑定,注意,为了方便数据的预处理,组件中的data是通过函数返回的对象
return {
result: ''
}
}
});
Q3:那都是通过一对一的绑定来实现数据同步的吗?
No!有种羁绊叫做组件嵌套
组件嵌套
通过组件之间的相互嵌套来达到组件内部的数据同步,并且这样的机制有利于开发功能性组件(如轮播图,搜索框,评论区等)
-
父子组件通信
-
父组件传值给子组件——只要data发生改变
父组件的view发生改变,子组件的view也发生改变
值传到子组件的方式是通过props属性
子组件通过props数据进行view同步
js脚本
-
var child = Vue.extend({
template: '<p>{{ content }}</p>',
props: ['content']
});
var Father = Vue.extend({
template: '<div><child :content='message'></child><input type="text" @change="sendMessage( $event );"/></div>',//将message代理到content属性中
data: function() {
return {
message: ''
}
},
method: {
sendMessage: function( event ) { //触发事件的事件列表
this.message = event.target.value; //改变message的值
}
}
});
//注册父组件
Vue.component('father-component', Father);
//定义边界
var vm = new Vue({
el: '#app'
});
html
<div id="app">
<father-component></father-component>
</div>
运行效果:
-
兄弟组件通信
兄弟组件的通信是通过一个共同的父组件或者边界来进行桥接创建兄弟组件
通过父组件“桥梁函数”的“分发”,子组件分别得到model,并同步到自己的view中去
js脚本
//孪生哥哥
var twinsCompOld = Vue.extend({
template: '<p>I am the old brother, my age is {{ title }}<input type="number" @change="GrowUp( $event )"></p>',
props: ['title', 'bridge'],//哥哥传入控制年龄增长的回调函数
methods: {
GrowUp: function(event) {
this.bridge(event.target.value);//将当前的年龄传入桥梁
}
}
});
//孪生弟弟
var twinsCompLittle = Vue.extend({
template: '<p>I am the little brother, my age is {{ title }}</p>',
props: ['title']//同步年龄
});
//父亲
var Father = Vue.extend({
template: '<div>{{ say }}<oldBrother :title="sonAge" :bridge="sendMessage"></oldBrother><littleBrother :title="sonAge"></littleBrother></div>',
components: {
'oldBrother': twinsCompOld,
'littleBrother': twinsCompLittle
},
data: function() {
var self = this; //因为执行这个函数的是子组件,因此需要将父组件的指针保存一下
return {
say: 'Daddy love you!',
sonAge: 0,
sendMessage: function( content ) { //桥梁函数
self.sonAge = content;
return self.sonAge;//儿子的年龄变化了
}
}
}
});
//注册父组件
Vue.component('father-component', Father);
//定义边界
var vm = new Vue({
el: '#app'
});
html:
<body>
<father-component></father-component>
</body>
运行效果:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。