一、传值说明
Vue实例可以当作一个组件，也有自己控制的区域。
然后在实例中定义私有组件，即子组件；子组件中，默认无法访问到父组件data中数据和methods中方法。
二、父组件通过属性绑定向子组件传值
- 父组件（Vue实例）身上有
data数据，控制区域的内部通过标签引入了子组件，则可以在引用子组件的时候通过属性绑定的方式把data中数据传递给子组件。 - 绑定的属性名称需要在子组件的
props属性身上定义一下（是个数组）；如果属性名是驼峰格式，绑定的时候需要转成小写加-连接的格式。 - 组件中的所有
props中的数据都是通过父组件传递过来的（data中是组件本身的数据，或者ajax请求回来的），都是只读的，无法重新赋值否则会报错。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app'>
<!-- 通过属性绑定方式把父组件数据传递给子组件内部 -->
<com1 :parent-msg = "msg"></com1>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
msg:'msg-父组件数据',
},
components:{
com1:{
template:'<h1>这是子组件——{{parentMsg}}</h1>', //子组件中使用父组件传递过来的数据
props:['parentMsg'] //父组件传递过来的属性在props数组中定义一下，这样才能使用这个数据
},
}
});
</script>
</body>
</html>
三、父组件通过事件绑定机制向子组件传递方法
要传递方法，则需要使用事件绑定机制，绑定一个自定义事件属性；然后即可通过调用$emit方法触发此从父组件传递过来的方法。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app'>
<!-- 事件绑定机制绑定一个自定义事件属性func（任意） -->
<!-- 将showLog方法的引用交给func -->
<com @func='showLog'></com>
</div>
<template id='templ'>
<div>
<h1>这是子组件</h1>
<input type="button" value="触发父组件传递过来的方法" @click="myclick">
</div>
</template>
<script>
var com = {
template: '#templ',
methods:{
myclick(){
this.$emit('func',123,456); //emit-触发、调用，使用$emit方法触发父组件传递过来的方法
//第二个开始的参数即要传入方法的参数
}
}
}
var vm = new Vue({
el: "#app",
methods: {
showLog(data,data2) { //此方法定义参数
console.log(`调用了父组件身上的方法——${data}——${data2}`);
}
},
components: {
com
}
});
</script>
</body>
</html>
四、子组件通过事件调用向父组件传值
1、通过（三、父组件通过事件绑定机制向子组件传递方法），在子组件调用此方法时把子组件数据传入此方法，从而父组件方法获取到了子组件传入的数据，进而可以变相的完成子组件向父组件传值。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app'>
<!-- 事件绑定机制绑定一个自定义事件属性func（任意） -->
<!-- 将showLog方法的引用交给func -->
<com @func='showLog'></com>
</div>
<template id='templ'>
<div>
<h1>这是子组件</h1>
<input type="button" value="触发父组件传递过来的方法" @click="myclick">
</div>
</template>
<script>
var com = {
template: '#templ',
data(){
return {
sonmsg:'子组件的数据'
}
},
methods:{
myclick(){
this.$emit('func',this.sonmsg); //emit-触发、调用，使用$emit方法触发父组件传递过来的方法
//第二个开始的参数即要传入方法的参数
//这样即把子组件数据传入了父组件方法，即子组件向父组件传递了数据
}
}
}
var vm = new Vue({
el: "#app",
data: {
msg: null,
},
methods: {
showLog(sonmsg) { //此方法定义参数
console.log(`调用了父组件身上的方法——${sonmsg}`);
this.msg = sonmsg; //这样，父组件即拿到了子组件数据，完成了子组件向父组件传值
console.log('父组件msg数据：'+this.msg);
}
},
components: {
com
}
});
</script>
</body>
</html>
2、使用
ref获取组件。即在调用子组件的时候加上
ref属性，父组件即vue实例的$refs对象身上即有此组件的引用，可以通过ref属性对应值作为key取到该组件，获取此组件data数据和methods方法。在下一篇：使用ref获取DOM元素和组件，有说明。
五、案例
发表评论功能，数据存到localStorage中。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div id='app'>
<common-box @func = "loadData"></common-box>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人：{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="templ">
<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="add">
</div>
</div>
</template>
<script>
var commonBox = {
template: '#templ',
data() {
return {
user: '',
content: ''
}
},
methods: {
add() { //发表评论
// 评论数据——应该存到localStorage中去
//要先取出来合并后再存
var commonData = {
id:Date.now(),
user:this.user,
content:this.content
};
//防止undefiend或者空字符串使JSON.parse报错
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
list.unshift(commonData);
//需要传入字符串数据
localStorage.setItem('cmts',JSON.stringify(list));
//清空页面数据
this.user = this.content='';
this.$emit('func');
}
}
}
var vm = new Vue({
el: "#app",
data: {
list: [
{
id: Date.now(),
user: '白毛',
content: '白毛琪亚娜请求出击'
}
]
},
methods: {
loadData(){ //从localStorage读取数据
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
this.list = list;
}
},
created(){ //声明周期钩子，data和methods已初始化
if(localStorage.getItem('cmts')==undefined){
localStorage.setItem('cmts',JSON.stringify(this.list));
}
this.loadData();
},
components: {
commonBox,
}
});
</script>
</body>
</html>
网友评论