Vue父子组件之间的通信

最新推荐文章于 2023-02-14 02:32:02 发布

layzz

最新推荐文章于 2023-02-14 02:32:02 发布

阅读量108

点赞数

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

本文链接：https://blog.csdn.net/qq_41887644/article/details/118675105

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

父传子是通过props，子传父是通过$emit

在这里插入图片描述

父向子传递-props

props的值有两种方式

字符串数组，数组中的字符串就是传递时的名称
对象，对象可以设置传递时的类型，也可以设置默认值

在这里插入图片描述

prop大小写的问题

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

prop类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

子传父（自定义事件）-$emit

在这里插入图片描述

<body>
		<!-- 子组件中产生的事件父组件知道 -->
		<div id="app">
			<cpn @itemclick='preClick'></cpn>
		</div>
		
		<template id="cpn">
			<div >
				<button v-for="item in categories "  @click="btnClick(item)" >{{item.name}}</button>
			</div>	
		</template>
		
		<script>
			const cpn = {
				template:'#cpn',
				data(){
					return{
						//子组件中的数据
						categories:[
							{id:'aaa',name:'热门推荐'},
							{id:'bbb',name:'手机数码'},
							{id:'ccc',name:'美妆'},
							{id:'ddd',name:'女装服饰'}
						]
					}
				},
				methods:{
					btnClick(item){
						//console.log(item);
						//将子组件事件传给父组件
						//发射一个事件
						
						this.$emit('itemclick',item);
					}
				}
				
			}
			//父组件
			new Vue({
				el: '#app',
				data: {

				},
				components:{
					cpn
				},
				methods:{
					preClick(item){
						console.log('itemclick',item);
					}
				}
			})
		</script>
	</body>

练习
在这里插入图片描述

layzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue父子组件之间的通信

父传子是通过props，子传父是通过$emit父向子传递-propsprops的值有两种方式字符串数组，数组中的字符串就是传递时的名称对象，对象可以设置传递时的类型，也可以设置默认值prop大小写的问题HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：Vue.compon
复制链接

扫一扫

专栏目录