vue中父子组件间怎么通信？下面本篇文章就来带大家了解一下vue父子组件通信，介绍一下父向子传值和子向父传值的方法，希望对大家有所帮助。
Vue父子组件
什么是父子组件？
在一个组件中引入另一个组件，被引入的就叫做子组件，因为vue的模块化，会把有公共的部分单独抽成一个模块，不会把所有页面内容写在一个vue文件下，因为模块化的原因，避免不了两个模块之间的通信问题，这时候就有了模块（组件）之间的数据传递问题。【相关推荐：《vue.js教程》】
Vue父子组件通信
在vue中经常会一个组件经常会用到另一个组件的数据或者方法，这时候就有了父子组件之间的通信问题
立即学习“前端免费学习笔记（深入）”；
Vue 父传子
1.先看代码，讲解在下面
//父组件//子组件//子组件 Vue.component("cpn3", { template: "#cpn3", // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里 props: { ctitle: { type: String, default () { return {} } } } })//父组件 const app = new Vue({ el: "#app", data: { title: 'orange' }, methods: {}, }){{ctitle}}
orange
登录后复制
讲解：
1.先写出基本的模板分离组件
2.在子组件中加入props属性，用对象方式，，在props里面可以写你需要传的参数，参数也用对象方式，代码比较清晰，
//子组件 Vue.component("cpn3", { template: "#cpn3", // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里 props: { ctitle: { //参数也使用对象形式，type传类型 default函数，是在找不到参数时返回一个值显示 type: String, default () { return {} } } } })
登录后复制
2.然后在父组件中加入需要的属性
//父组件 const app = new Vue({ el: "#app", data: { //这里的title就是要传入子组件的属性 在父组件中定义 title: 'orange' }, methods: {}, })
登录后复制
3.在父组件中绑定两个参数
//可以理解为将父组件中title 赋值给 ctitle，这样子组件就可以使用父组件的data属性了
登录后复制
4.最后在在子组件中要使用子组件定义的属性名
//子组件//这里的属性名为ctitle{{ctitle}}
登录后复制
Vue 子传父
1.子传父的意思就是，，子组件内容传给父组件，，使父组件可以随时使用子组件传来的数据，使用方法为：自定义函数
1、首先我们来做一个仿淘宝侧边栏商品，点击或者鼠标移动到上面出现内容商品案例
2、以上面这个图片为例，我们来讲一下组件传递的子传父
2.1我们将子组件和父组件分开先，挨个讲 先来看看子组件代码
Vue.component("cpn", { template: '#cpn', //父传子 props props: { ctitle: { type: String, //找不到数据时 default () { return {} } } }, data() { return { list: [{ id: 'phone', name: '手机' }, { id: 'tv', name: '电视' }, { id: 'p', name: '家电' }, { id: 'computer', name: '电脑' }, ] } }, //子传父 自定义事件 methods: { // 自定义事件 goodsclick(item) { this.$emit('itemclick', item) } } }){{ctitle}}
登录后复制
讲解：子组件就是写出一个组件（html）包装起来，并且可以随时使用， 也就相当于html一样的，只是打包起来而已（这么理解应该没什么问题）
1.子组件和vue一样有data，methods，这属性所以在data中写一个数组，然后用v-for的方式遍历生成按钮和正常写法没什么差别，然后写个函数，绑定点击事件，并且将item，也就是数组传入的对象传入函数，
登录后复制
2.然后最重要，最关键的一步来了，就是在你绑定的点击事件函数中，发射一个自定义函数给父组件，就是发送给父组件
methods: { // 自定义事件 goodsclick(item) { //itemclick就是自定义函数，并且将item也传过去给父组件 this.$emit('itemclick', item) } }
登录后复制
这就是子组件写完，这是子组件的样式，上图所示
2、接下来讲讲父组件怎么接收子组件传来的自定义事件
//父组件 const app = new Vue({ el: "#app", data: { title: "title", }, methods: { cpnclick(item) { console.log("cpnclick", item); } } })
登录后复制
讲解一下：你写好了子组件就要调用，调用就是你的组件名作为标签即可，，这里是
登录后复制
在父组件中写一个函数然后在里面绑定从子组件传过来的自定义事件，这样就成功绑定子组件，这样就完成子组件传数据到父组件了
本章完
更多编程相关知识，请访问：vue.js教程！！
以上就是Vue中父子组件间怎么通信？聊聊父传子和子传父的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3233050.html
