初始化项目：vue init webpack vue-demo
进入vue-demo文件夹：cd vue-demo
下载安装依赖：npm install
运行该项目：npm run dev
2.父组件向子组件传值src/components/文件夹下建一个组件，home.vue
创建子组件，在src/components/文件夹下新建一个文件夹，在新建文件夹中新建一个组件child.vue
在child.vue中创建props，用于接收父组件传递的值
<template> <p> <p v-for="(item,key) of c" :key="key"> {{key}}: {{item}} </p> </p></template><script>export default { name: 'child', props: { c: array }}</script><style scoped> </style>
在home.vue中注册child组件，并在template的p标签中添加home-child标签，标签中使用v-bind指令绑定c。子组件通过props就可以接受到这个父组件传递的值。
<template> <p class="hello"> <home-child v-bind:c="c"></home-child> </p></template><script>import homechild from '@/components/common/child'export default { name: 'home', components: { homechild }, data () { return { c:[1,2,3] } }}</script><style scoped></style>
结果
3.子组件向父组件传值给按钮绑定点击事件childclick
在事件的函数中使用$emit来触发一个自定义事件，并传递一个参数，这个参数就是子组件要传递给父组件的值。
<template> <p> <p v-for="(item,key) of c" :key="key"> {{key}}: {{item}} </p> <button v-on:click="childclick">点击向父组件传值</button> <span>{{data}}</span> </p></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> <p class="hello"> <home-child v-bind:c="c" :data="data" v-on:listenchild="showchild"></home-child> </p></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子组件与父组件通信详解
以上就是vue子组件与父组件之间的通信（附代码）的详细内容。