vue父组件与子组件通信方法

前言

本篇文章主要讲解父组件与子组件经常使用的联动通信方式。


通信第一步当然是将子组件引入父组件啦

1、全局引入(在main.js文件中引入并注册)

import assembly from '@/views/components/assembly'
Vue.component('assembly',assembly) // 第一个参数 全局组件的名字(字符串类型),第二个参数:父组件使用引入的组件名(一般都与组件名保持一致)

2、局部引入 

//在父组件中引入
import Assembly from '@/views/components/assembly'
export default {
  components: {
    Assembly
  },
}
//在父组件中使用子组件
<Assembly></Assembly>

一、props属性绑定(父组件向子组件传递数据)

在子组件中可以通过props属性接收父组件传值

例:父组件代码

<Assembly title="父组件传值"></Assembly>
//也可以通过 v-bind 动态赋值
<Assembly :title="title"></Assembly>

//如是通过v-bind动态赋值,需在data中定义
data(){
    return{
        title: '', //不限类型(字符串、数字、对象、数组等不限)
    }
}

子组件接收代码(props多种写法)

1、字符串数组形式

props: ['title', 'likes', 'isPublished', 'commentIds', 'author'],

2、指定props值类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise,
}

3、指定 prop 的验证要求,当 prop 验证失败的时候,(开发环境构建版本的) 将会产生一个控制台的警告。

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    title: Number,
    // 多个可能的类型
    title: [String, Number],
    // 必填的字符串
    title: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    title: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    title: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    title: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },

注意: prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

二、监听子组件事件(子组件向父组件或兄弟组件传递数据,子组件触发父组件或兄弟组件方法)

在子组件中可以通过this.$emit自定义一个事件提交给父组件,触发父组件的方法,父组件通过监听子组件的自定义事件可以接收子组件传递的数据。

例:子组件代码

//子组件A
<template>
    <div>
        <h1>{{ title }}</h1>
        <button @click="changeParentTitle">点击更改父组件title</button>
    </div>
</template>

<script>
export default {
    props:{
        title
    },
    data(){
        return{
            title: '',
        }
    },
    mounted(){},
    methods:{
        changeParentTitle(){
            this.$emit("childEvent", "子组件传给父组件的title")
            //第一个参数是提交的事件名,后面的参数可以是需要传递给父组件的参数
        },
    },
}
</script>

父组件代码

<template>
    <div>
        <Assembly :title="title" @childEvent="changeTitle"></Assembly>
    </div>
</template>

<script>
import Assembly from '../components/assembly.vue'
export default {
    components:{
        Assembly
    },
    data(){
        return{
            title: '',
        }
    },
    mounted(){},
    methods:{
        changeTitle(val){
            console.log(val)//val为子组件传过来的数据
        }
    },
}
</script>

<style>

兄弟组件代码

//子组件B
<template>
    <div>
        <h1>{{ title }}</h1>
    </div>
</template>

<script>
export default {
    props:{
        title
    },
    data(){
        return{
            title: '',
        }
    },
    mounted(){
        this.$on("childEvent",(val)=>{//监听事件childEvent,回调函数要使用箭头函数;
            console.log(val);//val为A组件传过来的数据
        })
    },
    methods:{},
}
</script>

三、使用$parent(子组件访问父组件的数据和方法)

this.$parent可以用来从一个子组件访问父组件的实例

子组件代码

<template>
    <div>
        <h1>{{ title }}</h1>
        <button @click="onMethod">调用父组件方法</button>
    </div>
</template>

<script>
export default {
    props:{
        title
    },
    data(){
        return{}
    },
    mounted(){
        this.title = this.$parent.title //获取父组件中title的数据
    },
    methods:{
        onMethod(){
            this.$parent.onSubmit() //调用父组件的方法onSubmit()
        },
    },
}
</script>

四、使用 $refs (父组件访问子组件的数据和方法) 

父组件使用 $refs 可以访问子组件的数据和方法,使用时需在调用子组件时给子组件定义一个 ref 名

 例:父组件代码

<template>
    <div>
        <Assembly ref="childrenDemo"></Assembly>
        <button @click="onMethod">调用父组件方法</button>
    </div>
</template>

<script>
import Assembly from '../components/assembly.vue'
export default {
    components:{
        Assembly
    },
    data(){
        return{
            title: '',
        }
    },
    mounted(){},
    methods:{
        onMethod(val){
            let child = this.$refs.childrenDemo //获取子组件实例
            console.log(child.value); //访问子组件属性
            child.childFn() //调用子组件的childFn()方法
        }
    },
}
</script>

<style>

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值