本例介绍Vue 组件交互
1、新建Vue项目
2、引入CSS
index页面引入 bootstrap.css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link rel="stylesheet" href="./static/css/bootstrap.css" > 7 <title>vue_demo</title> 8 </head> 9 <body> 10 <div id="app"></div> 11 <!-- built files will be auto injected --> 12 </body> 13 </html>
3、编辑main.js
1 /** 入口JS：创建Vue实例 */ 2 // 引入VUE 3 import Vue from 'vue' 4 // 引入App 5 import App from './App.vue' 6 7 // 固定写法 8 let vm = new Vue({ 9 el: '#app', 10 // 简写组件，组件映射 11 components: {App}, 12 template: '<App/>' 13 }) 14 // 使用vm 15 Vue.use({ 16 vm 17 })
4、编辑组件
注意，组件之间的值传递，主要是通过 props 属性
App.vue
1 <template> 2 <div> 3 <!-- <img class="logo" src="./assets/logo.png" alt="logo" /> --> 4 <!-- 3、使用组件标签 --> 5 <!-- <HelloWorld /> --> 6 <header class="site-header jumbotron"> 7 <div class="container"> 8 <div class="row"> 9 <div class="col-xs-12"> 10 <h1>请发表对Vue的评论</h1> 11 </div> 12 </div> 13 </div> 14 </header> 15 <div class="container"> 16 <!-- 左边 --> 17 <Add :addComment="addComment"/> 18 <!-- 右边 --> 19 <!-- 组件变量传递 --> 20 <List :comments="comments" :deleteComment="deleteComment"/> 21 </div> 22 </div> 23 </template> 24 25 <script> 26 // 1、引入组件 27 import HelloWorld from './components/HelloWorld.vue' 28 import Add from './components/Add.vue' 29 import List from './components/List.vue' 30 31 // 配置对象(与vue一致) 32 export default { 33 // 2、映射组件标签 34 components: { 35 HelloWorld: HelloWorld, 36 Add, 37 List 38 }, 39 // data : {} 40 // 必须写函数，返回一个对象 41 data () { 42 return { 43 // 数据在那个组件，更新数据的行为就应该在那个组件 44 comments: [ 45 { 46 name: 'Bob', 47 content: 'Vue 还不错' 48 }, 49 { 50 name: 'Cat', 51 content: 'Vue So Easy' 52 }, 53 { 54 name: 'Tom', 55 content: 'Vue So So' 56 } 57 ] 58 } 59 }, 60 methods: { 61 // 添加评论 62 addComment (comment) { 63 // 放入数组最前面 64 this.comments.unshift(comment) 65 }, 66 // 删除指定下标的评论 67 deleteComment (index) { 68 this.comments.splice(index, 1) 69 } 70 } 71 } 72 </script> 73 74 <style> 75 .logo { 76 width: 200px; 77 height: 200px; 78 } 79 </style>
List.vue
1 <template> 2 <div class="col-md-8"> 3 <h3 class="reply">评论回复：</h3> 4 <h2 v-show="comments.length===0" style="display: none">暂无评论，点击左侧添加评论！！！</h2> 5 <ul class="list-group"> 6 <Item v-for="(comment, index) in comments" :key="index" :comment="comment" 7 :deleteComment="deleteComment" :index="index"/> 8 </ul> 9 </div> 10 </template> 11 12 <script> 13 // 1、引入组件 14 import Item from './Item.vue' 15 // 向外默认暴露组件 16 export default { 17 // 声明接受属性,这个属性就会成为组件的对象属性 18 props: ['comments', 'deleteComment'], 19 components: { 20 Item 21 } 22 } 23 </script> 24 25 <style> 26 .reply { 27 margin-top: 0px; 28 } 29 </style>
Add.vue
1 <template> 2 <div class="col-md-4"> 3 <form class="form-horizontal"> 4 <div class="form-group"> 5 <label>用户名</label> 6 <input type="text" class="form-control" placeholder="用户名" v-model="name"/> 7 </div> 8 <div class="form-group"> 9 <label>评论内容</label> 10 <textarea 11 class="form-control" 12 rows="6" 13 placeholder="评论内容" 14 v-model="content" 15 ></textarea> 16 </div> 17 <div class="form-group"> 18 <div class="col-sm-offset-2 col-sm-10"> 19 <button type="button" class="btn btn-default pull-right" @click="add">提交</button> 20 </div> 21 </div> 22 </form> 23 </div> 24 </template> 25 26 <script> 27 // 向外默认暴露组件 28 // 配置对象(与vue一致) 29 export default { 30 props: { 31 addComment: { 32 type: Function, 33 required: true 34 } 35 }, 36 data () { 37 return { 38 name: '', 39 content: '' 40 } 41 }, 42 methods: { 43 add () { 44 // 1、检查输入的合法性 45 const name = this.name.trim() 46 const content = this.content.trim() 47 if (!name || !content) { 48 alert('姓名和内容不能为空') 49 return 50 } 51 // 2、根据输入的数据封装成一个comment对象 52 const comment = { 53 name, 54 content 55 } 56 // 3、添加到 comments中 57 // this.addComment : props中声明的属性都用this调用 58 this.addComment(comment) 59 // 4、清除输入 60 this.name = '' 61 this.content = '' 62 } 63 } 64 } 65 </script> 66 67 <style> 68 </style>
Item.vue
1 <template> 2 <li class="list-group-item"> 3 <div class="handle"> 4 <a href="javascript:;" @click="deleteItem">删除</a> 5 </div> 6 <p class="user"><span>{{comment.name}}</span><span>说:</span></p> 7 <p class="centence">{{comment.content}}</p> 8 </li> 9 </template> 10 11 <script> 12 export default { 13 // 声明接受属性,这个属性就会成为组件的对象属性 14 props: { 15 // 指定属性名和属性值类型 16 comment: Object, 17 deleteComment: Function, 18 index: Number 19 }, 20 methods: { 21 deleteItem () { 22 const {comment, index, deleteComment} = this 23 if (window.confirm(`确定删除${comment.name}的评论吗?`)) { 24 deleteComment(index) 25 } 26 } 27 } 28 } 29 </script> 30 31 <style> 32 li { 33 transition: 0.5s; 34 overflow: hidden; 35 } 36 37 .handle { 38 width: 40px; 39 border: 1px solid #ccc; 40 background: #fff; 41 position: absolute; 42 right: 10px; 43 top: 1px; 44 text-align: center; 45 } 46 47 .handle a { 48 display: block; 49 text-decoration: none; 50 } 51 52 .list-group-item .centence { 53 padding: 0px 50px; 54 } 55 56 .user { 57 font-size: 22px; 58 } 59 </style>
5、运行项目
命令：npm run dev
效果如下：
