vue杂谈--自定义组件通信之父组件向子组件传值

116 阅读 0 评论 77 点赞

我是靠谱客的博主可爱金鱼，这篇文章主要介绍vue杂谈--自定义组件通信之父组件向子组件传值，现在分享给大家，希望可以做个参考。

vue中定义组件后，父子组件设计到通信传值问题

1.父组件向子组件传值

使用props属性，子组件接受父组件传进来的值，首先在子组件中定义要接受的字段，然后父自己给接受的字段传值，

下面的代码在组件中定义了一个count字段，使用props定义

复制代码

1
2
3
4
5
Vue.component('todo-item', {
props:['count'],
template: '<li>{{count}}</li>'
})

在调用组件的时候，给count字段传值，使用绑定属性

复制代码

1
 <todo-item v-for="(item,index) in list" v-bind:count="item" :key="index"> </todo-item>

完整代码如下

复制代码

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
<html>
<head>
<title>vue演示</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<div>
<br/>
<ul>
<todo-item v-for="(item,index) in list" v-bind:count="item" :key="index"> </todo-item>
</ul>
</div>
</div>
</body>
<script>
Vue.component('todo-item', {
props:['count'],
template: '<li>{{count}}</li>'
})
var app = new Vue({
el: '#app',
data: {
list:[1,2,3,4,5,6]
},
methods:{
}
})
</script>
</html>