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>
组件最基本的应用就是如此，深入的应用，就会发现很多刚好玩的东西。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了antd Form组件表单在vue3中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue + element-plus自定义表单验证(修改密码业务)的示例
这篇文章主要介绍了vue + element-plus自定义表单验证(修改密码业务),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了Vue3实现可视化拖拽标签小程序,实现功能可视化标签拖拽，双击标签可修改标签内容，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue项目启动后如何在浏览器自动打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vite打包出现"default" is not exported by "no
这篇文章主要给大家介绍了关于vite打包出现"default" is not exported by "node_modules/...问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
在本文中我们给大家分享了关于vue环形进度条组件的使用方法以及实例代码，需要的朋友们跟着测试下吧。2018-10-10
下面小编就为大家分享一篇echarts鼠标覆盖高亮显示节点及关系名称详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue-cli项目使用vue-picture-preview图片预览组件方式
这篇文章主要介绍了vue-cli项目使用vue-picture-preview图片预览组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了vue分页器组件编写方法，可设置初始当前页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了Vue 动态路由的实现，动态路由是一个常用的功能，根据后台返回的路由json表，前端动态显示可跳转的路由项，本文主要实现的是后台传递路由，前端拿到并生成侧边栏的一个形势，需要的朋友可以参考一下2022-06-06
最新评论