Vue高效前端开发-Vue组件
Vue组件代码复用一直是软件开发过程中长期存在的一个问题，每个开发者都想再次使用之前写好的代码，又担心引用代码后会对程序产生影响。所以Vue就提供了组件系统，并且支持自定义标签和原生html元素的拓展。vue组件使用的3个步骤创建组件，调用Vue.extend()创建注册组件，调用Vue.component()注册使用组件，使用Vue实例页面内自定义组件标签例：<body><di
Vue组件
代码复用一直是软件开发过程中长期存在的一个问题，每个开发者都想再次使用之前写好的代码，又担心引用代码后会对程序产生影响。所以Vue就提供了组件系统，并且支持自定义标签和原生html元素的拓展。
vue组件使用的3个步骤
- 创建组件，调用Vue.extend()创建
- 注册组件，调用Vue.component()注册
- 使用组件，使用Vue实例页面内自定义组件标签
例：
<body>
<div id="app">
<hua-zhongxian></hua-zhongxian>
</div>
<script src="js/Vue.js"></script>
<script>
//创建组件
var huazhongxian = Vue.extend({
template: "<h1>画中仙</h1>"
});
//注册组件
Vue.component("hua-zhongxian", huazhongxian);
//使用组件
new Vue({
el: "#app"
})
</script>
</body>
ps:
组件的命名方法有两种
1，user-name(短横线分隔命名)
2，UserName(驼峰命名法)
Vue组件的使用
组件的注册分为两种方法
一是全局注册，可以在任意vue实例中调用，以上演示的就是全局注册。
二是局部注册，局部使用，下面演示局部注册，同时使用< template >标签简化。
例:
<body>
<div id="app">
<a-huang></a-huang>
</div>
<template id="huang">
<div>
<h1>阿黄</h1>
</div>
</template>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
components: { //注册组件
"a-huang": {
template: "#huang" //绑定组件
}
}
})
</script>
</body>
这种方法使得html代码和js代码是分开使用，便于阅读和维护。由上可以看出，简化后的代码简洁性明显优于未简化，所以在没有特殊需求的情况下建议使用简化后的。
Vue.js规定，在定义组件的选项时，data和el须使用函数，若data选项指向某个对象，这意味着所有组件实例共用一个data。
例：遍历显示人员信息，并具有筛选功能
<body>
<div id="app">
<new-list></new-list>
</div>
<template id="showlist">
<div>
<p><input type="text" v-model="selectkey" placeholder="请输入"></p>
<table class="table table-striped">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>介绍</th>
</tr>
<tr v-for="item in comlist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.show}}</td>
</tr>
</table>
</div>
</template>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
components: {
"new-list": {
data: function() {
return {
selectkey: "",
"lists": [{
"id": 1,
"name": "张三",
"age": 18,
"show": "张三介绍"
}, {
"id": 2,
"name": "李四",
"age": 19,
"show": "李四介绍"
}, {
"id": 3,
"name": "王五",
"age": 20,
"show": "王五介绍"
}, {
"id": 4,
"name": "赵六",
"age": 21,
"show": "赵六介绍"
}, {
"id": 5,
"name": "孙八",
"age": 22,
"show": "孙八介绍"
}]
}
},
computed: {
comlist: function() {
var _this = this;
return _this.lists.filter(function(val) {
return val.name.indexOf(_this.selectkey) != -1;
})
}
},
template: "#showlist"
}
}
})
</script>
</body>
父子组件
可以在组件中定义并使用其他组件，这就构成父子组件的关系。
例：
<body>
<div id="app">
<fu-temp></fu-temp>
</div>
<template id="fu">
<div>
<h1>祝愿美好的事物永远发生。</h1>
<zi-temp></zi-temp>
</div>
</template>
<template id="zi">
<div>
<h1>我们的征途是星辰大海。</h1>
<sun-temp></sun-temp>
</div>
</template>
<template id="sun">
<div>
<h1>创造一个传奇</h1>
</div>
</template>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
components: {
"fu-temp": {
template: "#fu",
components: {
"zi-temp": {
template: "#zi",
components: {
"sun-temp": {
template: "#sun"
}
}
}
}
}
}
})
</script>
</body>
组件之间的通信
组件的作用域是孤立的，这意味着不能并且不应该在子组件的模板内直接引用父组件的数据，可以使用props传递数据。使用选项props来声明需要从父组件中接受的数据。
props的值一般是两种，字符数组和对象。
字符数组语法：props:[“属性1”,“属性2”,…]
对象语法:props:{属性名1:string,属性名2:number,…}
例：使用组件传值方式遍历显示数据，且具有筛选。
<body>
<div id="app">
<!--遍历-->
<h1>列表</h1>
<fu-temp></fu-temp>
</div>
<template id="fu">
<div>
<input type="text" v-model="selectkey" placeholder="请输入">
<zi-temp :newlist="filterlists"></zi-temp>
</div>
</template>
<template id="zi">
<div>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>介绍</th>
</tr>
<tr v-for="item in newlist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.show}}</td>
</tr>
</table>
</div>
</template>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
components: {
"fu-temp": {
data: function() {
return {
selectkey: "",
"lists": [{
"id": 1,
"name": "张三",
"age": 18,
"show": "张三介绍"
}, {
"id": 2,
"name": "李四",
"age": 19,
"show": "李四介绍"
}, {
"id": 3,
"name": "王五",
"age": 20,
"show": "王五介绍"
}, {
"id": 4,
"name": "赵六",
"age": 21,
"show": "赵六介绍"
}, {
"id": 5,
"name": "孙八",
"age": 22,
"show": "孙八介绍"
}]
}
},
template: "#fu",
computed: {
filterlists: function() {
var _this = this;
return _this.lists.filter(function(val) {
return val.name.indexOf(_this.selectkey) != -1;
})
}
},
components: {
"zi-temp": {
props: ["newlist"], //接收值
template: "#zi"
}
}
}
}
})
</script>
</body>
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)