1.组件间数据传递以及父子组件的引用----Vue实践

左手的ㄟ右手 2023-06-06 10:33 8阅读 0赞

## 父子组件的引用 ##

直接上代码吧 下面是一个组件List.vue的内容：

<template>
    	<div class="col-md-8">
            <h3 class="reply">评论回复：</h3>
            <h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
            <ul class="list-group">
            	
              <Item v-for="(comment,index) in comments" :key="index" :comment='comment'></Item>
            </ul>
          </div>
    </template>
    
    <script>
    	import Item from './Item.vue'
    	
    	export default {
    		// 用于其他组件使用本组件时，通过：属性名称来传递数据  ，也就是说其他 地方使用该组件时 使用了'：comments' 来传递属性
    		props:['comments'],
    		// components 是指本组件使用了那些另外的组件，注意：组件不用引号包括 因为 已经通过 import 命名过了
    		components:{Item}
    	}
    </script>
    
    <style>
    	.reply {
      margin-top: 0px;
    }
    
    </style>

总结：  
父组件List.vue使用子组件Item.vue :  
  
1.在script中 import（引入）  
  
2.在export default中的components中声明

## 组件间数据传递 ##

下面是Item.vue 的内容：

<template>
    	<li class="list-group-item">
    		<div class="handle">
    			<a href="javascript:;">删除</a>
    		</div>
    		<p class="user"><span>{
       {comment.name}}</span><span>说:</span></p>
    		<p class="centence">{
       {comment.content}}</p>
    	</li>
    </template>
    
    <script>
    	export default {
    		props:['comment']
    	}
    </script>
    
    <style>
    li {
      transition: .5s;
      overflow: hidden;
    }
    
    .handle {
      width: 40px;
      border: 1px solid #ccc;
      background: #fff;
      position: absolute;
      right: 10px;
      top: 1px;
      text-align: center;
    }
    
    .handle a {
      display: block;
      text-decoration: none;
    }
    
    .list-group-item .centence {
      padding: 0px 50px;
    }
    
    .user {
      font-size: 22px;
    }
    </style>

总结：  
  
父组件 List.vue 向子组件 Item.vue 传递数据comment  
  
在此说明一下props与data中属性的区别：  
  
子组件中的data数据，不是通过父组件传递的是子组件私有的，是可读可写的。  
  
子组件中的所有 props中的数据，都是通过父组件传递给子组件的，是只读的。

1.  子组件Item.vue声明了comment属性（在props中声明(在data中声明的话不可用)）  
    
2.  父组件在使用Item组件的时候通过 ‘：comment’ 传递数据