Vue父子组件的传值和传方法实例
自定义的私有组件，不能访问vm实例中的数据
1、父组件向子组件传值
在使用私有组件的时候，通过属性绑定的形式，把需要传递给子组件的数据，以属性绑定的形式传递到私有组件中
<div id="app">
<!-- 1、在使用组件的时候，使用绑定命令，将所需要的VM实例数据绑定到私有组件中 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123 啊-父组件中的数据'
},
methods: {},
components: {
com1: {
// 3、直接用插值表达式的形式直接使用
template: '这是子组件 --- {{parentmsg}}
',
// 2、需要先在props中定义一下上面绑定的数据，注意props是个数组，里面所有数据都是从VM实例中传过来的
props: ['parentmsg']
}
}
})
</script>
私有组件中的数据是实例私有的，比如通过ajax请求回来的数据，数据是可读可写的，
props中的数据是VM实例传递过来的，只读
2、父组件向子组件传递函数
<div id="app">
<!-- 1、使用的时候直接使用事件绑定机制 v-on简写就是@ 当自定义了一个事件属性之后，子组件就能够通过某些方式调用这个传递的方法 -->
<com2 v-on:func="show"></com2>
</div>
<template id="templ">
<div>
<h1>这是子组件</h1>
<input type="button" value="触发父组件传递过来的show方法" @click="myclick">
</div>
</template>
<script>
var com2 = {
template: '#templ',
data() {
return {
sonmsg: {
name: '小头儿子',
age: 6
}
}
},
methods: {
myclick() { //在子组件的方法中使用传递过来的函数
// emit意思是触发调用的意思,前面是函数名字，后面是参数
this.$emit('func', this.sonmsg)
}
},
}
var vm = new Vue({
el: '#app',
data: {
hello:'传递的值',
datafromSon: null
},
methods: {
show(data) {
console.log('调用了父组件中的方法-----' + this.hello)
}
},
components: {
com2
}
})
1、使用的时候时间绑定v-on简写就是@
2、定义组件的时候直接在组件的方法中使用
3、最后在组件中使用定义的方法
其实本质就是，私有组件定义自己的函数，只不过在自己的函数中使用this.$emit(‘绑定的函数名’,参数)调用父组件的函数，
3、子组件向父组件传值
这种情况就是使用上述的情况达到效果，达到效果要使用到参数列表，通过参数列表的形式传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 事件的绑定 -->
<com1 @func="show"></com1>
</div>
<template id="temp">
<div>
<h1>private component</h1>
<input type="button" value="调用父组件函数传值" @click="myclick">
</div>
</template>
<script>
// 声明子组件
var com1={
template:'#temp',
data() {
return {
sonmsg:'儿子的消息'
}
},
methods:{
myclick(){
// 将子组件中的值通过this指针，传递给函数
this.$emit('func',this.sonmsg)
}
}
}
var vm = new Vue ({
el:'#app',
data: {
parent:null
},
methods: {
show(sonmsg){
// 函数中通过转递过来的值，将子组件中的值写入父组件中
this.parent=sonmsg
}
},
components: {
// 父组件注册
com1
}
})
</script>
</body>
</html>
注意数据的使用需要加上this指针
简单的实现发表评论的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<cmt-box @func="loadComments"></cmt-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="temp">
<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 = {
template: '#temp',
data() {
return {
user: null,
content: null,
}
},
methods: {
click(){
alert('------------------------')
},
postComment() {
if(this.user===''||this.user===null){
alert('用户名不能是空')
return true
}
var comment = {
id: Date.now(),
user: this.user,
content: this.content
}
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: []
},
methods: {
loadComments(){
var list= JSON.parse(localStorage.getItem('cmts')||'[]')
this.list=list
}
},
created() {
this.loadComments()
},
components: {
'cmt-box': commentbox
}
})
</script>
</body>
</html>
上面的对小白来说还是有点不清晰，下面要详细点,以下内容来源于网络
1.父组件向子组件传值
一般会在子组件里面定义props来做接收，这是比较常见的情况
这是父组件
<template>
<div>
<div>我是父组件</div>
<div>我发送给第一个组件的信息是:{{msg}}</div>
<div>
<div id="child1">
<ChildOne :msg="msg" />
</div>
</div>
</div>
</template>
<script>
import ChildOne from "../components/children1";
import ChildTwo from "../components/children2";
export default {
components: {
ChildOne,
ChildTwo
},
data() {
return {
msg: "我是父组件，我给你发消息",
};
}
};
</script>
可以看到我在第一个子组件上面传入了一个msg,那么在子组件上就需要定义一个msg用来接收传进来的参数
这是第一个子组件
<template>
<div>
<div id="title">我是第一个子组件</div>
<div>我接受到的父组件的消息是：{{msg}}</div>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String
}
}
};
</script>
效果
2.子组件向父组件传值
这时候就需要利用vue中的$emit将想要传递的值通过函数的形式传出，在父组件接收
this.$emit(arg1,arg2) arg1:方法名字，arg2:要传出的值
这是第二个子组件
<template>
<div>
<div id="title">我是第二个子组件</div>
<div>我要发送给父组件的值：{{msg}}</div>
<button @click="toParent">向父组件发送信息</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "我是第二组件，我要给父组件传值",
};
},
methods: {
toParent() {
this.$emit("toParent", this.msg);
}
}
};
</script>
我在button上绑定了一个点击事件，函数里面传出了一个方法名为toParent的方法，这时候我们就要去父组件接收这个函数，它会带一个返回值，这个返回值就是我们需要从子组件传的值。
这是父组件
<template>
<div>
<div>我是父组件</div>
<div>我即将接收第二组件传值是：{{child2Msg}}</div>
<div>
<div id="child2">
<ChildTwo @toParent="getMag" />
</div>
</div>
</div>
</template>
<script>
import ChildOne from "../components/children1";
import ChildTwo from "../components/children2";
export default {
components: {
ChildOne,
ChildTwo
},
data() {
return {
child2Msg: ""
};
},
methods: {
getMag(msg) {
this.child2Msg = msg;
}
}
};
</script>
此时我在父组件里面定义了一个@toParent方法这个名称要和子组件里面this.$emit(arg1)的命名一样，用来接收。在getMag里面接收一个参数就是当前传回的值。
效果
3.兄弟组件传值
兄弟组件之间就需要一个中间值，我在这里称为bus。在vue文件main.js中，我们利用 Vue.prototype.bus=new Vue()来定义，此时我们就有了一个中间量。
这是第一个子组件 – 从这里向另外一个子组件传值
<template>
<div>
<div id="title">我是第一个子组件</div>
我要给第二个兄弟发信息，内容是：
<input type="text" v-model="to" />
</div>
<button @click="toBrother">点我给兄弟传值</button>
</div>
</template>
<script>
export default {
data() {
return {
to: "哈喽老二"
};
},
methods: {
toBrother() {
this.bus.$emit("toBrother", this.to);
}
}
};
</script>
在这里我在button上绑定了一个方法，在方法内部使用中间变量bus中的$emit来传递值，参数同子传父的参数一致。
这是第二个子组件–用来做接收方
<template>
<div>
<div id="title">我是第二个子组件</div>
<div>我得到的兄弟组件信息是：{{get}}</div>
</div>
</template>
<script>
export default {
data() {
return {
get: ""
};
}
beforeCreate() {
this.bus.$on("toBrother", msg => {
this.get = msg;
});
}
};
</script>
在第二个子组件里面通过beforeCreate生命周期来获得传过来的值，这时候需要用this.bus.$on来接收，第一个参数是this.bus.$emit定义的第一个方法名，第二个参数是一个方法，此方法带一个返回参数。在这里我使用箭头函数。
效果
而且可以利用input来输入不同的信息，传入到兄弟组件中，例如
