一、父组件向子组件传值
<div id="app">
<!--父组件可以在引用子组件的时候，通过属性绑定{v-bind:}的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用-->
<com1 :parentmsg="msg "></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '父组件的数据'
},
methods: {},
components: {
//子组件中默认无法访问到父组件中的data上的数据和methods中的方法
com1: {
data() {//子组件中的data数据并不是通过父组件传递过来的，而是子组件自身私有的
return {
title: '123',
content: 'qqq'
}
},
template: '<h1>这是子组件 --- {{parentmsg}}</h1>',
/*组件中的所有props中的数据，都是通过父组件传递给子组件的*/
/*props中的数据只是可读的，不可以改变，而data中的数据可读可写*/
props: ['parentmsg']//把父组件传递过来的parentmsg属性，现在props数组中定义一下，这样才能使用这个数据
}
}
})
</script>
二、父组件把方法传递给子组件同时传值
<div id="app">
<!--父组件向子组件传递方法，使用的是事件绑定机制 v-on: 当我们自定义了一个事件属性之后，子组件可以通过某些方法来调用传递进去的这个方法-->
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮 - 点击它，触发父组件传递出来的func方法" @click="myClick">
</div>
</template>
<script>
var com2 = {
template: '#tmpl',
data() {
return {
sonmsg: {name: '小头儿子', age: 6}
}
},
methods: {
myClick() {
//emit 英文原意是触发的意思
this.$emit('func', this.sonmsg, 456);
}
}
};
var vm = new Vue({
el: '#app',
data: {
dataMsgFromSon: null
},
methods: {
show(data, data2) {
// console.log('调用了父组件身上的show方法---' + data + '---' + data2);
// console.log(data);
this.dataMsgFromSon = data;
}
},
components: {
com2
}
})
</script>
三、组件案例-评论列表
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap.css">
<script src="lib/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<ul class="list-group">
<li class="list-group-item" v-for="(item,i) in list" :key="item.i">
<span class="badge">评论人：{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="tmpl">
<div>
<div class="form-group">
<label>评论人：</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
</div>
</div>
</template>
<script>
var commentBox = {
data() {
return {
user: '',
content: ''
}
},
template: '#tmpl',
methods: {
postComment() {//发表评论的方法
//分析发表评论的业务逻辑
//1、评论数据存到 localStorage
//2、先组织一个最新的评论数据对象
//3、想办法把第二步得到的评论对象保存到localStorage
//3.1、localStorage只支持存放字符串，要先调用JSON.stringify
//3.2、在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据，把最新的评论push到这个数组
//3.3、如果获取到的评论字符串为空或者不存在，则可以返回一个'[]'，让JSON.parse去转换
//3.4、把最新的评论列表数组，再次调用JSON.stringify转换为数组字符串，然后调用localStorage.setItem();
var comment = {id: Date.now(), user: this.user, content: this.content};
/*从localStorage中获取的所有评论*/
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
list.unshift(comment);
localStorage.setItem('cmts', JSON.stringify(list));
this.user = this.content = '';
this.$emit('func');
}
}
};
var vm = new Vue({
el: '#app',
data: {
list: []
},
created() {
this.loadComments();
},
methods: {
loadComments() {//从本地的localStorage中加载评论列表
let list = JSON.parse(localStorage.getItem('cmts') || '[]');
this.list = list;
}
},
components: {
'cmt-box': commentBox
}
})
</script>
</body>
</html>
四、使用ref获取dom元素和组件
<div id="app">
<input type="button" value="获取元素" @click="getElement">
<h3 ref="myh3">哈哈哈，今天天气太好了！</h3>
<hr>
<login ref="mylogin"></login>
</div>
<script>
var login = {
template: '<h1>登录组件</h1>',
data() {
return {
msg: 'son msg'
}
},
methods: {
show() {
console.log('调用了子组件的方法');
}
}
};
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
//ref是英文单词reference 引用的意思
console.log(this.$refs.mylogin.msg);
this.$refs.mylogin.show();
}
},
components: {
login
}
})
</script>
