国瑞前端:在项目中,总会有一些交互,在使用vue的时候,就会涉及到传值等操作,本博文就来给大家讲讲父子组件传值的故事!
查看示例的时候请F12(谷歌浏览器)打开console调试框方便看到调试结果
vue父子组件传值常用方法
首先我们来讲在vue组件中常见的几种关系以及涉及到的知识点:
1、父组件向子组件传值
这里会用到props进行传输
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>父组件向子组件中传值</title>
<script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
ol,
ul,
li {
list-style: none;
}
.box {
width: 400px;
height: 200px;
background: red;
border: 1px solid yellow;
border-radius: 5px;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div id="app">
<!-- 在组件中写成forData,在html中就要写成for-data,并且要动态绑定,obj为父组件中定义的数据 -->
<Model :for-data="obj"></Model>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component('Model', {
props: {
forData: {
type: Object,
default: 'default'
}
},
data() {
return {
message: 0
}
},
template: ` <div class="box" >
<button @click="open">+1</button>
<div>
这里是数据:{{forData}}
<div>
messages的值为:{{message}}
</div>
<ul>a
<li v-for="item in forData">{{item.a}}</li>
</ul>
</div>
</div>`,
methods: {
open(e) {
//父组件传值到子组件
this.message = this.message + 1
this.forData.push({
a: this.message
})
}
}
})
new Vue({
el: "#app",
data: {
obj: [{
'a': 1
}, {
'a': 1
}]
}
})
</script> |
浏览效果请猛戳此处:点击
在组件中写成forData,在html中就要写成for-data,并且要动态绑定,obj为父组件中定义的数据
2、子组件向父组件传值
使用$emit,自定义事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>子组件向父组件中传值</title>
<script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
ol,
ul,
li {
list-style: none;
}
.box {
width: 400px;
height: 200px;
background: red;
border: 1px solid yellow;
border-radius: 5px;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div id="app">
<!-- 在组件中写成forData,在html中就要写成for-data,并且要动态绑定,obj为父组件中定义的数据 -->
<Model :for-data="obj" @on-ok="ok"></Model>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component('Model', {
props: {
forData: {
type: Object,
default: 'default'
}
},
data() {
return {
message: 0
}
},
template: ` <div class="box" >
<button @click="open">+1</button>
<div>
这里是数据:{{forData}}
<div>
messages的值为:{{message}}
</div>
<ul>a
<li v-for="item in forData">{{item.a}}</li>
</ul>
</div>
</div>`,
methods: {
open(e) {
//父组件传值到子组件
this.message = this.message + 1
this.forData.push({
a: this.message
})
//自定义事件使用
this.$emit('on-ok', {
'forData': this.forData,
'message': this.message
})
}
}
})
new Vue({
el: "#app",
data: {
obj: [{
'a': 1
}, {
'a': 1
}]
},
methods: {
ok(e) {
console.log('从子组件中传回父组件的值')
console.log(e)
}
}
})
</script> |
浏览效果请猛戳此处:点击
3、同一父组件下,两个子组件传值
这里需要用到子组件向父组件传递数据,然后父组件在分发给另一个子组件,复杂的逻辑交互最好使用vuex来进行操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>同级组件通讯</title>
<script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
ol,
ul,
li {
list-style: none;
}
.box {
width: 400px;
height: 200px;
background: red;
border: 1px solid yellow;
border-radius: 5px;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div id="app">
<!-- 在组件中写成forData,在html中就要写成for-data,并且要动态绑定,obj为父组件中定义的数据 -->
<Model-one :for-data="hots" @on-ok="ok"></Model-one>
<Model-two :for-data="hots" @on-ok="ok"></Model-two>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component('ModelOne', {
props: {
forData: {
type: Number,
default: 'default'
}
},
data() {
return {
message: 0
}
},
template: `
<div class="box" >
<button @click="open">+1</button>
<div>这里是第一个子组件,需要将值传给第二个子组件 :{{forData}}</div>
</div>`,
methods: {
open(e) {
//自定义事件使用
this.$emit('on-ok', {
'message': this.forData + 1
})
}
}
})
Vue.component('ModelTwo', {
props: {
forData: {
type: Number,
default: 'default'
}
},
data() {
return {
message: 0
}
},
template: ` <div class="box" >
<button @click="open">+1</button>
<div>
这里是数据:{{forData}}
</div>
</div>`,
methods: {
open(e) {
console.log(this.forData)
//自定义事件使用
this.$emit('on-ok', {
'message': this.forData + 1
})
}
}
})
new Vue({
el: "#app",
data: {
hots: 0
},
methods: {
ok(e) {
this.hots = e.message
}
},
watch: {
hots(e) {}
}
})
</script> |
浏览效果请猛戳此处:点击
4、不在同一父组件下的两个子组件传值
使用vuex进行状态修改,传值操作,详情访问我写的另一篇博文:
使用vuex制作购物车
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"vue父子组件_通讯传值"
最新评论