Vue父子组件传值通信

目录

Vue是一个轻量级的渐进式框架，首先我们先搭好开发环境，搭开发环境时得先装好git和npm这两个工具

props/@on+$emit

一、父组件向子组件传值

二、子组件向父组件传值 

Vue是一个轻量级的渐进式框架，首先我们先搭好开发环境，搭开发环境时得先装好git和npm这两个工具

环境搭建步骤：

• 打开git ，运行 npm install --global vue-cli 这是安装vue的命令行
• vue init webpack vue-demo 这是vue基于webpack的模板项目
• cd vue-demo 进入vue-demo文件夹
• npm install 安装package.json中依赖的node_modules
• npm run dev 运行该项目

作者：PengL
链接：https://www.jianshu.com/p/2670ca096cf8
来源：简书

props/@on+$emit

一、父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个child.vue
2.child.vue的中创建props，然后创建一个名为title的属性

通过 props 可以把父组件的消息传递给子组件：

//parent.vue

<child :title="title"></child>

//child.vue

props:{

      title:{

      type:String,

     default:''

    }

}

 父组件向子组件传值总结：

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

二、子组件向父组件传值 

通过 @on+$emit 组合可以实现子组件给父组件传递信息

// parent.vue

<child @changeTitle="changeTitle"></child>

// child.vue

this.$emit('changeTitle', 'bubuzou.com')

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

子组件向父组件传值总结：

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听