Vue 组件间通信有哪些方式,vue组件通信几种方式

　　本文主要详细介绍了Vue组件之间的通信方式。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

　　props

　　父组件可以通过props将数据向下传递给子组件。

　　静态的Props

　　通过给父组件中子组件的占位符添加属性，可以达到传递值的目的。

　　动态Props

　　在模板中，需要将父组件的数据动态绑定到子模板的道具上，类似于绑定任何常见的HTML特性。使用v-bind，只要父组件的数据发生变化，这种变化就会传递到子组件。

　　props验证

　　您可以为组件的属性指定验证规则。如果传入的数据不符合规则，Vue将发出警告。

　　道具：{

　　//基本类型检测( null表示任何类型都可以)

　　普罗帕：数字，

　　//多种类型

　　propB:[字符串，数字]，

　　//必须被传递，并且是一个字符串

　　propC: {

　　类型：字符串，

　　必填：真

　　},

　　//数字，带有默认值

　　propD: {

　　类型：数量，

　　默认值：100

　　},

　　//数组/对象的默认值应该由工厂函数返回

　　属性：{

　　类型：对象，

　　默认值：function () {

　　return { message:你好 }

　　}

　　},

　　//自定义验证函数

　　propF: {

　　验证器：函数(值){

　　返回值10

　　}

　　}

　　}

　　类型可以是(字符串、数字、布尔值、函数、对象、数组、符号)本机构造函数

　　类型也可以是自定义构造函数，由instenceof检测。

　　道具先绑定。当父组件的属性改变时，它将被传递到子组件，而不是相反。这是为了防止子组件无意中修改父组件的状态。

　　修改prop数据

　　在prop作为初始值传入之后，子组件希望将它作为本地数据传入，一些子组件将它处理成其他数据输出。注意：js中的对象和数组是引用类型，指向同一个内存空间。如果prop是一个对象或数组，在子组件内部更改它会影响父组件的状态处理方法。1:此时需要定义一个局部变量，用prop初始化，然而局部变量只能接受prop的初始值。当父组件的值更改时，它无法接收最新的值。处理方法2:定义一个计算属性，处理prop值，返回初始值。方法三：用变量存储prop的初始值，用watch观察prop值的变化，变化时更新变量值$emit。

　　$ emit(自定义时间名称，要传输的数据)在当前实例上触发事件。

　　父组件

　　模板

　　children @ add count= add count :count= count /

　　模板

　　脚本

　　从导入孩子。/children’；

　　导出默认值{

　　名称：“索引”，

　　组件：{Children}，

　　data () {

　　返回{

　　计数：0

　　}

　　},

　　方法：{

　　addCount(数据){

　　this . count=data . count；

　　}

　　}

　　}

　　/脚本

　　组件

　　模板

　　差异

　　H3计数器：{{count}}/h3

　　按钮@click=添加/按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　姓名：孩子，

　　Props:[count]，//用于接收父组件传递给子组件的数据。

　　方法：{

　　add() {

　　//触发父组件的方法

　　这个。$emit(addCount ，{ count:count 1 })；

　　}

　　}

　　}

　　/脚本

　　$on

　　$ on (event name ，callback)侦听当前实例上的事件和自定义事件。

　　父组件

　　模板

　　差异

　　span{{count}}/span

　　儿童/

　　/div

　　模板

　　脚本

　　从导入{ bus }./main . js ；

　　从导入孩子。/children’；

　　导出默认值{

　　名称：“索引”，

　　组件：{Children}，

　　data () {

　　返回{

　　计数：0

　　}

　　},

　　已安装(){

　　公交车。$on(addCount ，(val)={

　　this.count

　　})

　　}

　　}

　　/脚本

　　组件

　　模板

　　按钮@click=添加计数/按钮

　　/模板

　　脚本

　　从导入{ bus }./main . js ；

　　导出默认值{

　　姓名：孩子，

　　方法：{

　　add() {

　　//触发父组件的方法

　　公交车。$emit(addCount ，{ })；

　　}

　　}

　　}

　　/脚本

　　主文件

　　export var bus=new Vue()；

　　注意：e m i t和emit和emit和e m i t和on的事件必须在一个公共实例上，并且可以监视由emit触发的事件、由emit触发的事件和由EMIT触发的事件。

　　$parent（不常用）

　　指向当前组件树的根实例。如果当前实例没有父实例，该实例将指向自身。

　　$parent可以接受和修改父组件数据，这是双向的。$parent可以调用父组件的方法子组件

　　模板

　　Button @click=actionParent 触发父组件发送方法/按钮

　　/模板

　　脚本

　　导出默认值{

　　姓名：孩子，

　　方法：{

　　actionParent() {

　　console.log(这个。$ parent . name)；

　　这个。$ parent . parent print()；//触发父组件的方法

　　}

　　}

　　}

　　/脚本

　　$children（不常用）

　　指向当前实例的直接子组件，并返回组件的集合。

　　注意：孩子不按顺序，也没有反应。如果你发现自己在尝试，用孩子并不能保证秩序，也不是有求必应。如果你发现自己试图利用儿童，没有秩序的保证，这是没有反应的。如果您发现自己在尝试使用子元素进行数据绑定，可以考虑使用带有v-for的数组来生成子组件，并使用数组作为真正的源。

　　for(设I=0；这是。$ children.lengthi ){

　　console.log(这个。$children[i]。姓名)；//输出子组件的名称

　　}

　　$attrs

　　在父范围中包含未被识别(和获取)为正确的属性绑定(类和样式除外)。当一个组件没有声明任何prop时，它将包含所有父作用域的绑定，并可以通过v-bind=$attrs 传入内部组件——在创建高级组件时非常有用。

　　简单：接收除props声明之外的所有绑定属性(除了calss，style)

　　图上的$attrs只有两个属性{年龄：“20”，性别：“男人”}

　　在孙子上，通过v-bind=$attrs ，属性可以不断的传递下去，这样grendson也可以访问父组件的属性。

　　这个方法在传递多个属性的时候会非常方便，不用一个一个绑定。

　　如果要添加其他属性，可以继续绑定属性。注意：如果继续绑定的属性和$attr中的属性有重复，那么继续绑定的属性的优先级会更高。

　　$listeners

　　包含父范围中的v-on事件侦听器(没有。native modifier)，它可以通过v-on=$listeners 传入内部组件——在创建更高级别的组件时非常有用。

　　简单地说：接收所有事件侦听器，除了那些带有。本机事件修饰符。

　　子组件将单击事件与。本机事件和自定义事件，并且$listeners的输出结果是：{customEvent:fn}

　　通过v-on= listeners 向下传递事件侦听器，并让孙子访问事件。和emit可以用来触发传递的事件。

　　如果要添加其他事件侦听器，可以继续绑定事件。

　　注意：当继续绑定的事件与$listeners中的事件重复时，它不会被覆盖。孙子触发customEvent时，会触发子事件和父事件，触发顺序类似于冒泡。

　　使用场景

　　当组件传递值时，它们使用三个级别的参数交互：父、子和孙。一些UI库用于二次封装。比如当element-ui中的组件不能满足自己的使用场景时，就会重新封装，但是又想保留自己的属性和方法，这时候就可以使用了。$refs

　　这个。$refs是一个保存所有DOM元素和用当前组件中的ref属性注册的子组件实例的对象。

　　注意：$refs是在组件渲染后才填充的，初始渲染时无法访问，而且是无响应的，所以不能用于模板中的数据绑定。

　　父组件

　　模板

　　差异

　　div ref=testDom123/div

　　child ref=child /

　　Button @click=openChild 触发器子组件/button

　　/div

　　/模板

　　脚本

　　“导入子窗体”。/child.vue

　　导出默认值{

　　组件：{

　　儿童

　　},

　　已安装(){

　　console.log(这个。$refs.testDom) //div123/div

　　Console.log(这个。$ refs . child . name)//画师

　　},

　　方法：{

　　openChild(){

　　这个。$ refs . child . open()；

　　}

　　}

　　}

　　/脚本

　　组件

　　模板

　　div{{name}}/div

　　/模板

　　脚本

　　导出默认值{

　　data(){

　　返回{

　　姓名：“画家”

　　}

　　},

　　方法：{

　　open(){

　　Alter(点击)

　　}

　　}

　　}

　　/脚本

　　注意：当ref和v-for一起使用时，得到的数组将是一个包含循环数组源的数组。

　　provide inject

　　提供/注入是在VUE版本2.2之后添加的高级组件。这两个组件应该一起使用。

　　允许一个祖先组件将一个依赖项注入到它的所有后代中。无论组件级别有多深，在建立上下游关系的情况下总是有效的。类似React的上下文。

　　提供选项是一个对象或一个返回对象的函数。此对象包含可以注入其子对象的属性。

　　有两种注射方式：

　　字符串数组、对象、对象的键是本地绑定名称、value用来在可用的注入内容中搜索的键(字符串/符号),或者object from property用来在可用的注入内容中搜索的键(字符串/符号)。默认属性是降级时使用的valueprovide和inject的绑定没有响应，这是vue官员故意为之。如果传入一个可监视的对象，它的属性仍然是有响应的。

　　缺点:任何级别的访问都很难跟踪数据，所以没有它也可以使用provide/inject。尽量用vuex。在组件库中开发的都可以使用。

　　子组件

　　模板

　　测试

　　son prop=data/son

　　/div

　　/模板

　　脚本

　　导出默认值{

　　姓名：父亲，

　　提供：{

　　这个

　　}

　　data(){

　　返回{

　　名字：啊哈哈

　　}

　　}

　　}

　　//某个级别的子组件/孙组件

　　模板

　　差异

　　{{name}}

　　/div

　　/模板

　　脚本

　　导出默认值{

　　姓名：儿子，

　　注入：[chontrol]

　　道具：{

　　名称：{

　　类型：对象，

　　默认：()=({})，

　　},

　　}

　　},

　　}

　　/脚本

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

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