vue通信的几种方式,vue如何实现组件通信

  vue通信的几种方式,vue如何实现组件通信

  本文主要介绍了vue通信的八种方式,包括props父组件与子组件之间的通信、$emit子组件的父组件传递、$emit与props的兄弟组件之间的值传递等。想了解更多的可以参考下面这篇文章。

  

目录

  一、组件通信1、props父组件-子组件通信2、$emit子组件-父组件通信3、bus(事件总线)兄弟组件通信4、$parent、$children直接访问组件实例5、$refs6、提供/注入多组件或深

  

一、组件通信

  

1、props 父组件---子组件通信

  父组件属性用于将值传递给子组件。

  组件-在props模式下接收数据。

  Son :datas=fData/Son

  脚本

  从“@/components/son”导入Son

  导出默认值{

  姓名:父亲,

  组件:{Son},

  data(){

  返回{

  FData:“我是父组件传递给子组件的值-props way”

  }

  }

  }

  /脚本

  子组件属性接受的参数名应该与传递父组件时定义的属性名一致。

  模板

  Div I是父组件的数据:{{fData}}/div

  Div @click=changeData我是传递修改数据的父组件:{{mydata}}/div

  /模板

  脚本

  导出默认值{

  姓名:儿子,

  道具:{

  数据:{

  类型:字符串,

  默认值:“”

  }

  }

  data(){

  mydata:this.fatherData

  },

  方法:{

  changeData(){

  This.mydata=更改数据

  }

  },

  }

  /脚本

  注意:

  子组件不能直接修改父组件传递的值:由于Vue的单向数据流机制,直接修改父组件的值会被“污染”。(props是单向绑定(只读属性):当父组件的属性发生变化时,会传递到子组件,反之则不会)

  错误信息可能是:vue在使用属性通信时出错:避免直接改变属性,因为当父属性改变时,值将被重写。

  解决方案:您可以在子组件中定义一个变量mydata来接收fData数据。

  参数传递类型不确定是可以这么写:

  道具:{

  数据:{

  类型:[字符串,数字],

  默认值:“”

  }

  }

  

2、$emit 子组件---父组件传递

  子组件绑定自定义事件

  $emit()的第一个参数是用户定义的事件名称,第二个参数是要传输的数据。

  使用$emit()来触发更改数据子组件。

  El-button @ click= handlemit 更改父组件/el-button

  脚本

  导出默认值{

  姓名:儿子,

  方法:{

  handleEmit(){

  这个。$emit(triggerEmit ,子组件的数据)

  }

  }

  }

  /脚本

  父组件(子组件发送的事件名称应该与父组件接受的事件名称一致)

  Son @ trigger emit= change data /Son

  脚本

  从“@/components/son”导入Son

  导出默认值{

  姓名:父亲,

  组件:{Son},

  方法:{

  changeData(名称){

  Console.log(name) //=我是子组件的数据。

  }

  }

  }

  /脚本

  $emit与props结合 兄弟组件传值

  父组件引入了两个子组件。

  父组件充当桥父组件。

  myName=name/ChildA

  ChildB:myName= name @ changeName= editName /ChildB

  导出默认值{

  data() {

  返回{

  名称:“你好数据”

  }

  },

  方法:{

  editName(name){

  this.name=name

  }

  }

  }

  子组件B改变,接收数据

  p姓名:{{我的姓名}}/p

  按钮@click=changeName 修改名称/按钮

  脚本

  导出默认值{

  道具:{

  我的名字:字符串

  },

  方法:{

  changeName() {

  这个。$emit(changeName ,新数据名称)

  }

  }

  }

  /脚本

  子组件A接收数据

  P name: {{ newName }}/p

  脚本

  导出默认值{

  道具:{

  我的名字:字符串

  }

  }

  /脚本

  

3、bus(事件总线) 兄弟组件通信

  非父子组件或更多层间组件传递值。在Vue中,一个独立的事件中心管理组件之间的值传递。

  创建一个公共bus.js文件

  公开Vue实例

  数据发送端触发总线。通过事件发出$emit(方法名,传递的数据)。

  在生命周期功能中,接收器通过总线监听。$on(方法名,[参数])

  Destroy事件,数据接收器在数据被总线破坏后将无法侦听数据。$off(方法名)

  从“vue”导入Vue

  const bus=new Vue()

  导出默认总线

  需要改变数据的组件中定义调用

  模板

  差异

  我是A/div,通信组件。

  按钮@click=changeName 修改名称/按钮

  /div

  /模板

  脚本

  从“@/utils/Bus.js”导入总线;

  导出默认值{

  组件:{},

  data() {

  return { };

  },

  已安装(){

  console.log(总线);

  },

  方法:{

  changeName() {

  公交车。$emit(editName ,数据集!);

  },

  },

  };

  /脚本

  style lang=scss 范围

  /风格

  另外一个组件中同样引入bus.js文件,通过$on监听事件回调

  模板

  差异

  Span: {{name}}/span

  我是通信组件B/div。

  /div

  /模板

  脚本

  从“@/utils/Bus.js”导入总线;

  导出默认值{

  组件:{},

  data() {

  返回{ name };

  },

  已安装(){

  公交车。$on(编辑名称,(名称)={

  this.name=name

  console.log(名称);//

  });

  },

  方法:{},

  };

  /脚本

  style lang=scss 范围

  /风格

  

4、$parent、$children 直接访问组件实例

  子组件通过- $parent获取父组件实例。

  父组件通过- $children获取子组件实例的数组。

  子组件-这个。$ parent可以获取父组件的方法、数据的数据等。可以直接使用和执行。

  模板

  我是子组件/分部。

  /模板

  脚本

  导出默认值{

  姓名:儿子,

  data(){

  返回{

  SonTitle:“我是一个子组件的数据”

  }

  },

  方法:{

  sonHandle(){

  Console.log(我是子组件方法)

  }

  },

  已创建(){

  console.log(这个。$parent)

  Console.log(这个。$ parent.fathertitle)//=我是父组件的数据

  这个。$ parent.fantherhandle ()//=我是父组件的方法。

  }

  }

  /脚本

  父组件——获取子组件实例,获取的实例是数组的形式。只有这个。$children[0]可以获取一个组件实例,并调用组件方法和数据。

  模板

  差异

  我是父组件/子组件。

  /div

  /模板

  脚本

  从导入儿子。/son.vue

  导出默认值{

  姓名:父亲,

  组件:{

  儿子

  },

  data(){

  返回{

  父标题:“我是父组件的数据”

  }

  },

  方法:{

  fantherHandle(){

  Console.log(我是父组件的方法)

  }

  },

  已安装(){

  console.log(这个。$儿童)

  Console.log(这个。$ children [0]。sontitle)//=我是一个子组件的数据。

  这个。$ children [0]。sonhandle ()//=我是一个子组件方法

  }

  }

  /脚本

  

5、$refs

  Ref用于注册元素或子组件的参考信息。引用信息将注册在父组件的refs对象上。

  父组件使用$refs获取组件实例。

  模板

  差异

  儿子,儿子

  /div

  /模板

  脚本

  从导入儿子。/son.vue

  导出默认值{

  姓名:父亲,

  组件:{

  儿子

  },

  已安装(){

  Console.log(这个。$refs.son) /*组件实例*/

  }

  }

  /脚本

  

6、provide/inject(提供/注入) 多组件或深层次组件通信

  provide/inject详解

  父组件使用provide注入数据

  子组件使用inject来使用数据。

  /*父组件*/

  导出默认值{

  提供:{

  返回{

  ProvideName:“出售前端婴儿”

  }

  }

  }

  此时,变量provideName可以提供给它的所有子组件,包括曾孙和孙,并且只能通过使用inject来获取数据。

  /*子组件*/

  导出默认值{

  注入:[provideName],

  已创建(){

  console . log(this . providename)//=卖前端宝贝

  }

  }

  父组件不需要知道哪个组件使用它提供的数据。

  附件不需要知道这些数据来自哪里。

  

7、slot(slot-scope作用域插槽) 子元素--父元素(类似于通信)

  用作可重复使用的模板(可以传输数据)来替换呈现的元素。

  在子组件中,只需将数据传递给插槽,就像将prop传递给组件一样。

  注意:父插槽接收的内容是最外层的元素,必须有一个插槽范围的子元素。

  模板

  差异

  div class=isSon

  slot :info=arrList/slot

  /div

  /div

  /模板

  脚本

  导出默认值{

  组件:{},

  data() {

  Return {arrList:[1, aa ,张三]};

  },

  已安装(){

  },

  方法:{

  },

  };

  /脚本

  父元素

  模板

  差异

  歌曲

  span slot-scope=props

  保险商实验所

  嗜酒者互诫协会

  Li v-for= item in props . info :key= item

  {{item}}

  /李

  /ul

  /span

  /宋

  /div

  /模板

  脚本

  从导入歌曲./components/SonG.vue

  导出默认值{

  组件:{

  歌曲

  },

  data () {

  返回{

  }

  }

  }

  /脚本

  

8、vuex状态管理

  相当于公共数据的仓库。

  提供一些管理仓库数据的方法。

  从“vue”导入Vue

  从“vuex”导入Vuex

  Vue.use(Vuex)

  导出默认的新Vuex。商店({

  状态:{

  },

  突变:{

  },

  动作:{

  },

  模块:{

  }

  })

  关于与vue建立沟通的八种方式的文章到此结束。有关与vue建立通信方式的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: