Vue2.0学习之详解Vue 组件及父子组件通信
什么是组件？
vue中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘，键盘，鼠标），它就是一个具有独立逻辑或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。
页面就是由一个个类似这样的部分组成的，比如导航，列表，弹窗，下拉列表等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。
前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西。
使用组件的好处？
1、提高开发效率
2、方便重复使用
3、简化调试步骤
4、提升整个项目的可维护性
5、便于协同开发
vue中的组件
vue中的组件是一个自定义标签，vue.js的编译器为它添加特殊功能
vue中的组件也可以扩展原生的html元素，封装可重用的代码
组件的基本组成：样式结构，行为逻辑，数据
注册组件
全局注册
可以在任何模板中使用，使用之前要先注册
语法：使用Vue.compontent(组件名，选项对象)
组件名命名约定：驼峰，烤串
在html中使用组件：使用烤串命名法
例如，注册Vue.compontent('my-compontent',{}),使用的时候<my-compontent></my-compontent>
<div id="app">
<h2>自定义下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
// 全局注册组件
Vue.component('cus-list',{
data(){
return {
}
},
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" value="">
<span></span>
</div>
</div>
</section>
`
})
new Vue({
el:"#app",
data:{
}
})
</script>
使用的时候，只要在页面上召唤这个组件就可使用，并且可以复用。
组件.png
局部注册
在组件实例中通过选项对象注册，只在所注册的作用域中使用
<div id="app">
<h2>自定义下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
new Vue({
el:"#app",
components:{
'cus-list':{
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" value="">
<span></span>
</div>
</div>
</section>
`
}
},
data:{
}
})
</script>
局部注册的组件，只有在当前实例的作用域中才可以使用，在作用域中也可以复用，效果如下。
组件.png
父子组件间通信
父组件给子组件通信
父组件===》子组件（用props）
组件实例的作用域是孤立的，不能再子组件直接用父组件的数据。
可以在组件上使用自定义属性绑定数据，在组件中组要显示的用props生命自定义属性名。
也就是记住一句话，父组件给子组件传值得时候，就是调用组件时给组件添加 一个属性，然后在组件内用props接收即可，组件内根据属性名即可使用。
<div id="app">
<h2>自定义下拉框</h2>
<cus-list btn-value="查询"></cus-list>
<cus-list btn-value="搜索"></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('cus-list',{
data(){
},
props:['btnValue'],
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" :value="btnValue">
<span></span>
</div>
</div>
</section>
`
})
new Vue({
el:"#app",
data:{
}
})
</script>
页面效果
props传值.png
子组件给父组件通信
子组件===》父组件
需要用到自定义时间，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。
1、在子组件中定义事件内容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>
2、父组件中v-on自定义事件进行接收v-on:receive="changeValue"
3、在触发子组件事件的时候，$emit 通知父组件 this.$emit("receive",item);
4、父组件根据自定义事件进行相应反馈changeValue:function(value){this.val = value;}
看如下案例，点击input的时候，出现下拉列表框，选中相应的列表，列表内容出现在input框中。
<div id="app">
<h2>自定义下拉框</h2>
<cus-list select-Value="搜索" v-bind:list="list1" >
</cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
// 全局注册组件
Vue.component('cus-list',{
data(){
return {
selectShow:false,
val:''
}
},
props:['selectValue','list'],
template:`
<section>
<div>
<div>
<input type="text" @click="selectShow = !selectShow" :value="val">
<input type="button" name="" :value="selectValue">
</div>
<list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
</div>
</section>
`,
methods:{
changeValue:function(value){
this.val = value;
}
}
})
Vue.component('list-li',{
props:['list'],
template:`
<ul>
<li v-for="item of list" @click="clickLi(item)">{{item}}</li>
</ul>
`,
methods:{
clickLi:function(item){
this.$emit("receive",item);
}
}
})
new Vue({
el:"#app",
data:{
list1:['宋仲基','余文乐','鹿晗','陈小春','黄晓明','易烊千玺']
}
})
</script>
组件最基本的应用就是如此，深入的应用，就会发现很多刚好玩的东西。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
日常开发中,建议用可以用Prettier做代码格式化,然后用eslint做校验,下面这篇文章主要给大家介绍了关于在IDEA中配置eslint和prettier的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue中使用echarts的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了Vue keepAlive页面强制刷新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
在这篇文章主要为大家详细介绍了如何一步步地实现一个基于 Vue 3 的轮播组件,这个组件的特点是可以通过鼠标滑动和滚轮来控制轮播图的切换,感兴趣的可以了解下2024-02-02
这篇文章主要介绍了vue 兄弟组件的信息传递的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口,下面这篇文章主要给大家介绍了关于vue3项目实战中的接口调用的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue 实现setInterval 创建和销毁实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了关于Vue ui 的没反应、报错问题解决总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue环境变量配置之process.env解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了Vue表单预校验 validate方法不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最新评论