在Vue2.0中如何实现组件及父子组件通信
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了在Vue2.0中如何实现组件及父子组件通信，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4713字，纯文字阅读大概需要7分钟。
内容图文
本篇文章主要介绍了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>
<p id="app">
<h2>自定义下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</p>
<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>
<p>
<p>
<input type="text">
<input type="button" name="" value="">
<span></span>
</p>
</p>
</section>
`
})
new Vue({
el:"#app",
data:{
}
})
</script>使用的时候，只要在页面上召唤这个组件就可使用，并且可以复用。
组件.png
局部注册
在组件实例中通过选项对象注册，只在所注册的作用域中使用
<p id="app">
<h2>自定义下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</p>
<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>
<p>
<p>
<input type="text">
<input type="button" name="" value="">
<span></span>
</p>
</p>
</section>
`
}
},
data:{
}
})
</script>局部注册的组件，只有在当前实例的作用域中才可以使用，在作用域中也可以复用，效果如下。
组件.png
父子组件间通信
父组件给子组件通信
父组件===》子组件（用props）
组件实例的作用域是孤立的，不能再子组件直接用父组件的数据。
可以在组件上使用自定义属性绑定数据，在组件中组要显示的用props生命自定义属性名。
也就是记住一句话，父组件给子组件传值得时候，就是调用组件时给组件添加 一个属性，然后在组件内用props接收即可，组件内根据属性名即可使用。
<p id="app">
<h2>自定义下拉框</h2>
<cus-list btn-value="查询"></cus-list>
<cus-list btn-value="搜索"></cus-list>
</p>
<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>
<p>
<p>
<input type="text">
<input type="button" name="" :value="btnValue">
<span></span>
</p>
</p>
</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框中。
<p id="app">
<h2>自定义下拉框</h2>
<cus-list select-Value="搜索" v-bind:list="list1" >
</cus-list>
</p>
<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>
<p>
<p>
<input type="text" @click="selectShow = !selectShow" :value="val">
<input type="button" name="" :value="selectValue">
</p>
<list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
</p>
</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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在Django与Vue语法中存在冲突问题如何解决
在nodejs中如何实现爬取网站图片
有关ES6/JavaScript使用技巧（详细教程）
使用微信小程序如何实现动态设置placeholder提示文字
以上就是在Vue2.0中如何实现组件及父子组件通信的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的在Vue2.0中如何实现组件及父子组件通信全部内容，希望文章能够帮你解决在Vue2.0中如何实现组件及父子组件通信所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。