vue-组件-父子组件交互

最新推荐文章于 2024-04-03 00:00:00 发布

gaog2zh

最新推荐文章于 2024-04-03 00:00:00 发布

阅读量179

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/gaogzhen/article/details/107589712

版权

vue 专栏收录该内容

42 篇文章 10 订阅

订阅专栏

vue-组件-父子组件交互

文章目录

1、父组件向子组件传值
2、props
3、子组件向父组件传值
- ***后记*** ：

内容

+图示： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nlHaM7ZP-1595729050647)(./images/fs.jpg)]

1、父组件向子组件传值

组件内部通过props接收传递过来的值

  Vue.component('MenuItem', {
  	...
  	props: ['title'],
  	template: `<div>{{ title }}</div>`
  	...
  })

父组件通过同名属性把值传递给子组件

  <menu-item :title="ptitle"></menu-item>
  
  ...
  data: {
  	ptitle: '父组件数据'
  }

示例1-1：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>02_pTOC</title>
  	<script src="../assets/js/vue.js"></script>
  </head>
  <body>
  <div id="app">
  	<div>{{ pmsg }}</div>
  	<menu-item :title="ptitle"></menu-item>
  </div>

  <script>
  	Vue.component('menu-item', {
  		data() {
  			return {
  				msg: '子组件本身的数据'
  			}
  		},
  		props: ['title'],
  		template: `<div>{{ msg  }} --- {{ title }}</div>`
  	})
  	const app = new Vue({
  		el: '#app',
  		data: {
  			pmsg: '父组件中的数据',
  			ptitle: '父组件传递过来的数据'
  		}
  	 });
   </script>
  </body>
  </html>	
  
  结果：
  父组件中的数据
  子组件本身的数据 --- 父组件传递过来的数据

2、props

2.1、属性名规则

props中使用驼峰形式，模板中需要使用短横线的形式
字符串形式的模板中没有这个限制

2.2、props属性值类型

字符串：String
数值：Number
布尔型：Boolean
数组：Array
对象：Object

2.3、props类型设置与校验

此处不做详述，在以后自定义组件中详细介绍。

3、子组件向父组件传值

子组件v-on $emit ：子组件通过自定义事件向父组件传递值
父组件通过监听子组件获取值

示例3-1：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>03_c2p</title>
  	<script src="../assets/js/vue.js"></script>
  </head>
  <body>
  <div id="app">
  	<div>{{ pmsg }}</div>
  	<subc @c2p="recieve"></subc>
  	<div> {{ smsg }}</div>
  </div>

  <script>
  	Vue.component('subc', {
  		data() {
  			return {
  				msg: '子组件内容'
  			}
  		},
  		template: `<button @click="transfer">子组件</button>`,
  		methods: {
  			transfer() {
  				this.$emit('c2p', this.msg)
  			}
  		},

  	})
  	const app = new Vue({
  		el: '#app',
  		data: {
  			pmsg: '父组件',
  			smsg: '父组件内容 '
  		},
  		methods:{
  			recieve(val) {
  				this.smsg += '---' + val
  			}
  		}
  	 });
   </script>
  </body>
  </html>

后记：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue-组件-父子组件交互

vue-组件-父子组件交互

目录

文章目录

内容

1、父组件向子组件传值

2、props

2.1、属性名规则

2.2、props属性值类型

2.3、props类型设置与校验

3、子组件向父组件传值

后记 ：

后记：