如何在vue2.0中自定义组件
这篇文章将为大家详细讲解有关如何在vue2.0中自定义组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
10年积累的成都网站设计、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有田家庵免费网站建设让你可以放心的选择与我们合作。
封装组件的步骤
1. 建立组件的模板，先把架子搭起来，写写样式，考虑你的组件的基本逻辑。
os：思考1小时，码码10分钟，程序猿的准则。
2. 准备组件的好数据输入。即分析好逻辑，定好 props 里面的数据、类型。(后面详解)
3.准备组件的好数据输出。即根据组件逻辑，做好要暴露出来的方法。（后面详解）
4.封装完毕了，直接调用即可。
os： 代码可以不看，结论在文章最后
接下来以一个很简单的例子具体说明一下
现在先看一下demo的效果图
三、 demo代码
父组件：
import Search from '../vuePlugin/search'
export default {
data() {
return {
searchList: ['草船借箭', '大富翁', '测试数据'],
// 直接通过props传递对象 修改，挺便捷的,但是不规范
selectValue: {
data: '1'
},
// 通过emit修改，规范写法
selectValue2: ''
}
},
mounted() {},
methods: {
pageGo(path) {
this.$router.push('/' + path)
},
selectFunc(value) {
this.selectValue2 = value
console.log(this.selectValue)
console.log(this.selectValue2)
}
},
components: {
Search
}
}
.f-mainPage{
width: 100%;
.g-banner{
width: 100%;
background-image: url(../../../static/main_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
color: white;
text-align: center;
p:nth-child(1) {
margin: 10px auto 0px auto;
font-size: 1.3rem;
}
.f-banscri {
margin: 15px auto 8px auto;
font-size: 0.95rem;
}
.f-moneyMax{
margin: 5px auto 0px auto;
font-size: 2.4rem;
}
.f-returnCash{
width: 120px;
height: 35px;
text-align: center;
line-height: 35px;
background-color: white;
color: #169BD5;
display: inline-block;
border-radius: 5px;
font-size: 1rem;
margin-top: 35px;
position: relative;
.f-mmmbd{
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
top: 0;
left: 0;
}
}
}
.g-cashInfor{
width: 100%;
text-align: center;
display: flex;
justify-content: space-between;
div{
width: 50%;
height: 60px;
line-height: 60px;
box-sizing: border-box;
}
div:nth-child(1){
border-bottom: 1px solid #878787;
border-right: 1px solid #878787;
}
div:nth-child(2){
border-bottom: 1px solid #878787;
}
}
.g-operate{
width: 100%;
height: auto;
overflow: hidden;
ul{
list-style: none;
padding: 0;
margin: 0;
font-size: 1.05rem;
li{
height: 60px;
line-height: 60px;
padding-left: 25px;
position: relative;
span{
width: 20px;
height: 20px;
position: absolute;
top: 20px;
right: 20px;
background-image: url(../../../static/go.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
.f-goodNews{
width: 340px;
height: 144.5px;
margin: 20px auto 30px auto;
text-align: center;
background-image: url(../../../static/banner.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
子组件：
{{this.searchValue}}
{{item}}
