Vue - 父子组件传值
2019-10-17 本文已影响0人
ElricTang
| 方法 | 例子 | 描述 |
|---|---|---|
| props | props['message'] | 父组件传值给子组件 |
| ref | this.$refs.xxx | 父组件访问子组件属性 |
| $emit | this.$emit(event,handle) | 子组件主动发布事件，父组件监听 |
| $parent | this.$parent | 直接访问根实例 |
| $root | this.$root | 直接访问根实例 |
| Vuex | 使用Vuex进行状态管理 | 处理多个组件共享状态问题 |
父组件向子组件传值
- 在子组件的props中声明想要接受的参数，父组件在使用子组件时传入参数。
- 使用props传值时是单向的，也就是子组件没法修改父组件内的数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src='../node_modules/vue/dist/vue.js'></script>
<script src='../node_modules/vue-resource/dist/vue-resource.js'></script>
</head>
<body>
<div id='app'>
<child message="hello world"></child>
</div>
<script>
var child = {
template:'<h2>{{message}}</h2>',
props:{
message:String
},
data(){
return {
}
}
}
var vm = new Vue({
el:'#app',
components:{
child
},
})
</script>
</body>
</html>
子组件向父组件传值
-
ref是子组件的一个引用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src='./node_modules/vue/dist/vue.js'></script>
<script src='./node_modules/vue-resource/dist/vue-resource.js'></script>
</head>
<body>
<div id='app'>
<input type="button" value="show" @click="useShow">
<com1 ref="com1"></com1>
</div>
<script>
var com1 = {
template:'<h2>{{msg}}</h2>',
data(){
return {
msg:'hello world'
}
},
methods:{
show(){
console.log(this.msg)
}
}
}
var vm = new Vue({
el:'#app',
methods:{
useShow(){
this.$refs.com1.show();
}
},
components:{
com1,
}
})
</script>
</body>
</html>
- 子组件中使用
$emit发布事件，在父组件中监听该事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src='../node_modules/vue/dist/vue.js'></script>
<script src='../node_modules/vue-resource/dist/vue-resource.js'></script>
</head>
<body>
<div id='app'>
<child @child-event="get"></child>
</div>
<script>
var child = {
template:'<button @click="sendMsg">发送</button>',
methods:{
sendMsg(){
this.$emit('child-event','hello world from child');
}
}
}
var vm = new Vue({
el:'#app',
components:{
child
},
methods:{
get(data){
console.log(data)
}
}
})
</script>
</body>
</html>
