本例介绍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
效果如下：
标签：comment,Vue,name,content,vue,组件,交互 From： https://www.cnblogs.com/h--d/p/16709383.html