vue常见的三种组件通讯—props,$refs,this.$emit

时间：2021-07-11 00:56:00 阅读：25 评论：0 收藏：0 [点我收藏+]

一.父组件--->子组件 props

1.特点:props是用于父组件向子组件传递数据信息（props是单向绑定的，即只能父组件向子组件传递，不能反向

2.用法：父组件中使用子组件时，绑定要传递的数据，父组件中对要绑定的数据添加方法或者值

子组件通过props接收值

3.示例

// 父组件
<template>
    <div>我是父组件</div>
     <add-configuration :message="checkList" />
</template>
import addConfiguration from ‘@/components/addConfiguration.vue‘
export default {
    components:{
        addConfiguration    
    },
    data() {
        return {
            checkList: []        
        }    
    },
    methods:{
         getList() {
             ....
             this.checkList= ...         
         }   
    }
}

// 子组件
<template>
    <div>我是子组件</div>
    <div>我是父组件传递过来的数组{{message}}</div>
</template>
export default {
    props: {
        message: {
          type: Array,
          default: () => []
        }
  },
    data() {
        return {                
        }    
    }
}

二.子组件--->父组件 $refs

1.特点：父组件获取子组件的方法或者属性，$refs 数据是双向绑定的，子组件可以向父组件传递方法，父组件可以向子组件传递参数

2.用法：父组件通过子组件中的ref标识来获取子组件的方法或者属性

this.$refs.标识.方法

3.示例：

// 父组件
<template>
    <div>我是父组件</div>
     <add-configuration ref="configurationRef" />
</template>
import addConfiguration from ‘@/components/addConfiguration.vue‘
export default {
    components:{
        addConfiguration    
    },
    data() {
        return {                 
        }    
    },
    methods:{
         getList() {
             this.$ref.transforFntoFather()         
         }   
    }
}

// 子组件
<template>
    <div>我是子组件</div>
</template>
export default {
    data() {
        return {                
        }    
    },
    methods:{
         transforFntoFather() {
             ....         
         }   
    }
}

三.子组件--->父组件 $emit

1.特点：父组件向子组件通信，而通过e m i t 实现子组件向父组件通信。对于 emit 实现子组件向父组件通信

2.用法：

父组件中的子组件绑定一个事情@事件名

父组件处理事件方法

子组件调用

this.emit(事件名)

3.示例：

// 父组件
<template>
    <div>我是父组件</div>
     <add-configuration @fatherMethod="initialData" />
</template>
import addConfiguration from ‘@/components/addConfiguration.vue‘
export default {
    components:{
        addConfiguration    
    },
    data() {
        return {                 
        }    
    },
    methods:{
         initialData() {
             .... // 请求api接口返回数据       
         }   
    }
}

// 子组件
<template>
    <div>我是子组件</div>
</template>
export default {
    data() {
        return {
         configCategory:1             
        }    
    },
    mounted(){
        this. getListData()   
    }
    methods:{
         getListData() {
             this.$emit(‘fatherMethod‘,this.configCategory)     
         }   
    }
}

vue常见的三种组件通讯—props,$refs,this.$emit

原文：https://www.cnblogs.com/chandlerwong/p/14995167.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)