vue的组件通信
2019-10-09 本文已影响0人
于美美
1.父组件向子组件传值
//App.vue父组件
<template>
<div id="app">
<child :users="users"></child>//前者自定义名称用于子组件调用，后者要传递数据的名称
</div>
</template>
<script>
import child from "./components/child"
export default {
name: 'App',
data(){
return{
users:["Henry","Bucky","Emily"]
}
},
components:{
child
}
}
//child.vue子组件
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
users:{ //父组件中自定义名称
type:Array,
required:true
}
}
}
</script>
父传子的实现方式：在子组件上使用自定义属性绑定数据，用props声明自定义属性（父组件通过props向下传值）
2.子组件向父组件传值
//App.vue父组件
<template>
<div id="app">
<child :users=“users" @change=“change"></child>//前者自定义名称便于子组件调用，后者要传递数据名
</div>
</template>
<script>
import child from "./components/child"
export default {
name: 'App',
data(){
return{
users:["Henry","Bucky","Emily"]
}
},
components:{
child
},
methods: {
change (data) {
console.log(data) //data是子组件传过来的数据，只要子组件传过来值有变化，change这个函数就会被触发
}
}
}
//child.vue子组件
<template>
<div class="hello">
<ul>
<li v-for="user in users” @click=“sendMsg">{{user}}</li>//遍历传递过来的值，然后呈现到页面
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
users:{ //这个就是父组件中子标签自定义名字
type:Array,
required:true
}
},
data(){
msg:’123’ //要发送给父组件的值
},
methods: {
sendMsg () {
this.$emit(‘change', this.msg) //msg传给父组件的值
}
}
}
</script>
