vue中子组件和子组件之间怎么通信_Vue子组件与父组件之间的通信

1.环境搭建

下载 vue-cli：npm install -g vue-cli

初始化项目：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，用于接收父组件传递的值

{{key}}: {{item}}

export default {

name: 'child',

props: {

c: Array

}

}

在Home.vue中注册Child组件，并在template的div标签中添加home-child标签，标签中使用v-bind指令绑定c。子组件通过props就可以接受到这个父组件传递的值。

import HomeChild from '@/components/common/Child'

export default {

name: 'home',

components: {

HomeChild

},

data () {

return {

c:[1,2,3]

}

}

}

结果

3.子组件向父组件传值

给按钮绑定点击事件ChildClick

在事件的函数中使用$emit来触发一个自定义事件，并传递一个参数，这个参数就是子组件要传递给父组件的值。

{{key}}: {{item}}

点击向父组件传值

{{data}}

export default {

name: 'child',

props: {

c: Array,

data: String

},

methods: {

ChildClick: function () {

this.$emit("ListenChild","I am child.vue")

}

}

}

在父组件中的home-child标签中监听该自定义事件，并添加一个响应该事件的方法ShowChild。

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)

}

}

}

结果：

点击按钮后：