脚本宝典收集整理的这篇文章主要介绍了Vue子组件与父组件之间的通信,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
npm install -g vue-cli
vue init webpack vue-demo
cd vue-demo
npm install
npm run dev
在Child.vue中创建props,用于接收父组件传递的值
<template>
<div>
<div v-for="(item,key) of c" :key="key">
{{key}}: {{item}}
</div>
</div>
</template>
<script>
export default {
name: 'child',
props: {
c: Array
}
}
</script>
<style scoped>
</style>
在Home.vue中注册Child组件,并在template的div标签中添加home-child标签,标签中使用v-bind
指令绑定c。子组件通过props就可以接受到这个父组件传递的值。
<template>
<div class="hello">
<home-child v-bind:c="c"></home-child>
</div>
</template>
<script>
import HomeChild from '@/components/common/Child'
export default {
name: 'home',
components: {
HomeChild
},
data () {
return {
c:[1,2,3]
}
}
}
</script>
<style scoped>
</style>
结果
给按钮绑定点击事件ChildClick
在事件的函数中使用$emit来触发一个自定义事件,并传递一个参数,这个参数就是子组件要传递给父组件的值。
<template>
<div>
<div v-for="(item,key) of c" :key="key">
{{key}}: {{item}}
</div>
<button v-on:click="ChildClick">点击向父组件传值</button>
<span>{{data}}</span>
</div>
</template>
<script>
export default {
name: 'child',
props: {
c: Array,
data: String
},
methods: {
ChildClick: function () {
this.$emit("ListenChild","I am child.vue")
}
}
}
</script>
<style scoped>
</style>
在父组件中的home-child标签中监听该自定义事件,并添加一个响应该事件的方法ShowChild。
<template>
<div class="hello">
<home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
</div>
</template>
<script>
import HomeChild from '@/components/common/Child'
export default {
name: 'Home',
components: {
HomeChild
},
data () {
return {
c:[1,2,3],
data: " "
}
},
methods: {
ShowChild: function (data) {
this.data = data
console.log("data:" + data)
}
}
}
</script>
<style scoped>
</style>
结果:
点击按钮后:
以上是脚本宝典为你收集整理的Vue子组件与父组件之间的通信全部内容,希望文章能够帮你解决Vue子组件与父组件之间的通信所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。