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的p标签中添加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) } }}
登录后复制
结果：
点击按钮后：
相关文章：
实例详解vue组件间通信子与父详解（二）
vue子组件与父组件通信详解
以上就是Vue子组件与父组件之间的通信（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2744465.html
