vue中中的组件通信

1.父组件传递给子组件信息props
写法简说：父组件中通过v-bind方法绑定子组件中的props中的方法，然后通过该方法绑定值,下文中的是v-bind:(props_name) = “父组件data方法中的值”

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>父组件向子组件信息传递props</title></head><body><div id="app"><cpn v-bind:cmovies = "movies" :cmessage="message"></cpn></div><template id="cpn"><div>{{cmovies}}{{cmessage}}</div></template><script type="text/javascript" src="../js/vue.min.js"></script><script type="text/javascript">const cpn = {template : '#cpn',// props : ['cmovies','cmessage'],props:{//类型限制// cmovies:Array,// cmessage:String//提供一些默认值(vue-validator（vue验证器）)cmessage:{type:String,default:'aaaaa',required:true},cmovies:{type:Array,default:'bbbb',}},data(){},methods:{}}var app = new Vue({el:'#app',data:{movies:['甄嬛传','如懿传','武则天传奇'],message:'请叫我女皇大人'},components:{cpn}})</script></body>
</html>

2.子组件像父组件传值**$ emit**
格式：this.$emit(‘事件名称’,‘需要传入的值’)；
模板中父组件：@传入的时间名称=“父组件中自定义方法”

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- //父组件 --><div id="app"><cpn @itemclick="cpnclick"></cpn></div><!-- //子组件 --><template id="cpn"><div><button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button></div></template><script type="text/javascript" src="../js/vue.min.js"></script><script type="text/javascript">//子组件const cpn = {template : '#cpn',data(){return {categories : [{id:'aaa',name:'热门推荐'},{id:'bbb',name:'手机数码'},{id:'ccc',name:'家用家电'},]}},methods:{btnClick(item){//发射出去一个事件的名称this.$emit('itemclick',item);}}}//父组件var app = new Vue({el:'#app',data:{message : '您哈呀'},methods:{cpnclick(item){console.log(item)}},components:{cpn}})</script></body>
</html>

父组件直接访问子组件children
格式：this.$ children(一般拿所有的值的时候回用到)
this.$ refs.html中的ref属性的名字（拿某一个组件的值）


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><cpn ref="aaa"></cpn><cpn></cpn><cpn></cpn><button @click="btnclick">我是按钮</button></div><template id="cpn"><div>我是子组件</div></template><script type="text/javascript" src="../js/vue.min.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{message:'ninhaoy'},methods:{btnclick(){this.$refs.aaa.showMessage();this.$children[0].showMessage();}},components:{cpn:{template:'#cpn',methods:{showMessage(){console.log('我是子组件的方法')}}}}})</script></body>
</html>

子访问父组件中的数据parent
用法this.$parent

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><cpn></cpn></div><template id="cpn"><ccpn></ccpn></template><template id="ccpn"><h2 @click="btnclick()">我是子组件</h2></template><script type="text/javascript" src="../js/vue.min.js"></script><script type="text/javascript">const app = new Vue({el:'#app',methods:{message:'您好呀',},components:{cpn:{template:'#cpn',data(){return {name:'我是不是你们的小可爱'}},components:{ccpn:{template:'#ccpn',methods:{btnclick(){// 访问父组件console.log(this.$parent.name)}}}}},},})</script></body>
</html>

vue中中的组件通信相关推荐

Vue之非父子组件通信
Vue之非父子组件通信非父子组件传值方法: 1:在model中新建一个js文件引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
VUE中的父子组件通信
VUE项目中的父子组件之间的传值. 首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的 ...
vue学习笔记(1)-组件通信
vue.js官方教程上讲的也挺清楚的了,自己整理一遍以加深印象,同时也完成自己的项目中需要的动态创建表单提交编辑修改功能. 表单主要是v-model双向绑定实现父组件与子组件的双向数据传递,所以首先说 ...
Vue 3.0父子组件通信
在Vue 3.0 发布以后,我们基于新的特性,来归纳一下父子组件通信的方式.并且检验一下Vue 2.0中常用的通信方式,如何在Vue 3.0中使用.本文列出了三种常用的通信方式: 子组件通过emit函 ...
前端Vue入门-day04-用vue实现组件通信
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录组件的三大组成部分注意点说明组件的样式冲突 scoped data 是一个函数组件通信什么是组 ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
vue之非父子组件通信实现方式
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信.这里主要讲两种方式: Provide/Inject Mitt全局事件总线 1.Provide和Inject 应用 ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
vue：父子组件通信
页面增加展示文字 1.进入demo-project项目的src\components目录下新建views目录,并新建First.vue文件 2.进入router目录下的index.js并配置路由路径: ...

vue中中的组件通信

vue中中的组件通信相关推荐

最新文章

热门文章