简单实现基于vue的评论发布

简单实现基于vue的评论发布

思路分析:

1. 创建一个List的组件,用于展示留言列表
2. 使用prop进行父子组件的通信

父组件

将昵称和评论内容包装成对象，从而实现数据的传递

<template>
  <div class="title">
    <h1>今日摘抄</h1>
  </div>
  <hr/>
  <div class="box">
    <div class="user">
      <div class="nickName">昵称:</div>
      <input v-model="name" type="text">
    </div>
      <div class="comm">
      <div class="remark">评论:</div>
      <textarea v-model="content" cols="10px" rows="5px"></textarea>
    </div>
    <div :class="sendBtn" @click="send">
      <b>发布</b>
    </div>
  </div>
  <hr/>
  <Homework2 :commList="infoList"/>
</template>

v-model：创建双向数据绑定，监听用户的输入事件获取数据，将监听到的数据存储在name中，实现数据的提交

@click=“send” ：点击触发send方法

:commList=“infoList” ：将获取的数据（昵称和评论）传递给commList

<script>
  import Homework2 from 'path'
  export default {
    name: 'App',
    components: {
      Homework2
    },
    data(){
      return{
        infoList:[],
        name:'',
        content:''
      };
    },

    methods:{
      send(){
        this.infoList.push({name:this.name,content:this.content});
      }
    }
  }
</script>

在data中定义要用的参数，infoList数组用于存储昵称和评论，name用户存储用户输入的用户名，content用于存储用户输入的评论内容

send()方法：当点击发布时，触发send()方法，将获取的数据包装成对象，通过push方法发送

子组件

子组件通过props接收父组件传递过来的数据实现对数据的渲染

<template>
    <div class="listItem" v-for="item in commList" :key="item">
        <div>
          <div class="userInfo">
            <img src="headportrait.jpg" alt="">
            <b>{{item.name}}</b>
          </div>
          <div class="userComm">{{item.content}}</div>
        </div>

        <div class="btn">
            <button class="reply">回复</button>
            <button class="delete">删除</button>
        </div>
        <hr/>
    </div>
</template>

class=“listItem” v-for=“item in commList” :key=“item”

通过v-for实现对数组中数据的渲染

<script>
   export default {
    name: 'Homework2',
    data(){
        return{

        }
    },
    props:["commList"],

    methods:{
        
    }
}
</script>

data(){
return{

    }
},
props:["commList"],

methods:{
    
}

}

> 通过props定义commList来接受父组件传递过来的数据 ，此时所用的数据据不用在data中在定义，否则容易出现冲突