vue父子组件进行通信方式原来是这样的

 更新时间:2022年02月13日 17:28:17   作者:卖菜的小白  
这篇文章主要为大家详细介绍了vue父子组件进行通信方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

在vue中如何实现父子组件通信,本篇博客将会详细介绍父子组件通信的流程。

在这里插入图片描述

如图所示,父组件向子组件传递数据,可以通过props,子组件向父组件传递数据可以通过触发事件来进行。

一、props

父组件向子组件传递的数据,通过props进行传递,我们可以把props理解为属性。props传递存在两种格式,一种是数组格式,另一种是对象类型格式。其中第二种对象类型可以设置是否为必须数据,以及是否存在默认值数据。

第一种用法:数组

//父组件
 <HelloWorld :title="title"></HelloWorld>
//子组件
  props: ["title"],

第二种用法:对象

//父组件:
<HelloWorld :title="title"></HelloWorld>
//子组件:
  props: {
    title:{
      type:String,
      required:true,
      default() {
        return "我是title"
      }
    }
  },
//上面default为什么是一个函数?
因为是一个组件,组件在其他组件都能使用,并且如果default是一个key;value形式,并且value是一个引用
类型的值,则如果要更改props的值,则其他组件的值也会更改。

type属性的类型有哪些?

type属性的类型有:String,Number,Boolean,Array,Object,Date, Function,Symbol。

三、对象类型的其他写法

props:{
	messageinfo:String,
	propsA:Number,
	propsC:{
		type:String,
		required:true
	},
	propsE:{
		type:Object,
		default(){
			return {message:"hello"}
		}
	},
	//自定义验证函数
	title:{
      validator(value) {
        console.log("hhh")
        return ["hello","world"].includes(value)
      }
    }
}

二、细节三props大小写命名

props名使用驼峰命名,则可以使用-连接

    //父组件
    <HelloWorld :mess-age="title"></HelloWorld>
    //子组件
    props: {
    messAge:{
      type:String,
    }
  },

三、非props的attributes属性

如果在父组件中设置attributes,但是在子组件中的props不存在该属性,则如果子组件存在根节点,则就会该属性就会继承到根节点上。

在这里插入图片描述

如果我们不希望根节点继承,可以使用inhertAttrs:false,这样就可以继承到非根节点上。

<template>
  <div>{{ messAge }}
    <h1 :class="$attrs.class">hhhhh</h1>
  </div>
</template>

在这里插入图片描述

如果要是存在多个根节点,则就会显示warning,表示不能自动继承,此时我们可以使用$attrs.属性名来实现继承属性。

在这里插入图片描述

<template>
  <h1>{{ messAge }}</h1>
  <h1>哈哈哈</h1>
  <h1 :class="$attrs.class">呵呵呵</h1>
</template>

在这里插入图片描述

四、子组件传递给父组件

1、当子组件有一些事情发生的时候,比如在组件中发生点击,父组件需要切换内容。2
2、子组件有一些内容想要传递给父组件。
3、子组件通过$emit()触发事件,并且在emits中进行注册事件。
4、注册的事件可以是数组类型的,也可以是对象类型。

五、简单例子

数组格式

//子组件
<template>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
</template>
<script>
export default {
  emits:["add", "sub"],
  data() {
    return {
    }
  },
  methods: {
    increment: function () {
      this.$emit("add")
    },
    decrement: function () {
      this.$emit("sub")
    },
  },
};
</script>
<style scoped></style>
//父组件
<template>
  <h1>当前的数字是:{{counter}}</h1>
  <HelloWorld @add="addOne" @sub="subOne"></HelloWorld>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
  components: { HelloWorld },
  data() {
    return {
      counter: 0
    }
  },
  methods:{
    addOne() {
      this.counter++
    },
    subOne() {
      this.counter--
    }
  }
}
</script>
<style scoped></style>

数组格式:如果我们想要设置自定义事件,可以使用emits:["add", "sub"],数组格式。

对象格式:主要是针对需要向父组件传递参数的例子.

//父组件
<template>
  <h1>当前的数字是:{{counter}}</h1>
  <HelloWorld @add="addOne" @sub="subOne" @addN="addNumbers"></HelloWorld>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
  components: { HelloWorld },
  data() {
    return {
      counter: 0,
    }
  },
  methods:{
    addOne() {
      this.counter++
    },
    subOne() {
      this.counter--
    },
    addNumbers(value) {
      this.counter += parseInt(value)
    }
  }
}
</script>
<style scoped></style>
//子组件
<template>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
  <input type="text" v-model="num" />
  <button @click="incrementN">+N</button>
</template>
<script>
export default {
  emits: {
    add:null,
    sub:null,
    addN:(dispatch) => {
      if(dispatch > 10) {
        return true
      }
      return false
    }
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    increment: function () {
      this.$emit("add");
    },
    decrement: function () {
      this.$emit("sub");
    },
    incrementN: function () {
      this.$emit("addN", this.num);
    },
  },
};
</script>
<style scoped></style>

这里采用对象的格式:可以进行传入参数的判断。如果符合则返回true,如果不符合则返回false,但是仍可以执行,只是在控制台出现warning.

emits: {
    add:null,
    sub:null,
    addN:(dispatch) => {
      if(dispatch > 10) {
        return true
      }
      return false
    }
  }

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!     

相关文章

  • vue中实现千位分隔符的示例代码

    vue中实现千位分隔符的示例代码

    本文主要介绍了vue中实现千位分隔符的示例代码,主要两种方法,一种是某一个字段转换,一种是表格table中的整列字段转换,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • Vue的hover/click事件如何动态改变颜色和背景色

    Vue的hover/click事件如何动态改变颜色和背景色

    这篇文章主要介绍了Vue的hover/click事件如何动态改变颜色和背景色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue插件报错:Vue.js is detected on this page.问题解决

    Vue插件报错:Vue.js is detected on this page.问题解决

    这篇文章主要介绍了Vue插件报错:Vue.js is detected on this page.问题解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • vue源码解读子节点优化更新

    vue源码解读子节点优化更新

    这篇文章主要为大家介绍了vue源码解读子节点优化更新示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 使用vue-cli创建vue项目介绍

    使用vue-cli创建vue项目介绍

    这篇文章介绍了使用vue-cli创建vue项目的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • Vue中的el-date-picker时间选择器的使用实例详解

    Vue中的el-date-picker时间选择器的使用实例详解

    el-date-picker是Element UI框架中提供的日期选择器组件,它支持单个日期、日期范围、时间、日期时间等多种选择方式,本文给大家介绍Vue中的el-date-picker时间选择器的使用,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue调用后端java接口的实例代码

    Vue调用后端java接口的实例代码

    今天小编就为大家分享一篇Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 10分钟快速上手VueRouter4.x教程

    10分钟快速上手VueRouter4.x教程

    Vue Router目前最新版本是4.X,本文主要主要介绍了10分钟快速上手VueRouter4.x教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue cli3.0 引入eslint 结合vscode使用

    vue cli3.0 引入eslint 结合vscode使用

    这篇文章主要介绍了vue cli3.0 引入eslint 结合vscode使用,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue项目使用定时器每隔几秒运行一次某方法代码实例

    vue项目使用定时器每隔几秒运行一次某方法代码实例

    有时候在项目中我们经常需要设置简单的倒计时功能,这个可以通过定时器来实现,下面这篇文章主要给大家介绍了关于vue项目使用定时器每隔几秒运行一次某方法的相关资料,需要的朋友可以参考下
    2023-04-04

最新评论