Vue学习之父子组件传参
文章目录[隐藏][*]前言
[*]例子
[*]例子显示效果
前言
这几天在学习 Vue 的时候，学习了 Vue 组件的父子组件，父子组件显得尤为重要。
例子
新建一个子组件
components: {
'blog-post': {
props: {
myTitle: String
},
template: '<h2 @click="h2Click">{{myTitle}}</h2>',
methods: {
h2Click: function(){
let index = 1; // 传出的参数
this.$emit('send-data', index);
}
}
}
}
使用组件
<div id="app">
<blog-post
:my-title="title"
@send-data="handleClick"
>
</blog-post>
</div>
父组件向子组件传参方式
v-bind 和属性方式：
属性方式: 传递的是一个字符串
v-bind: 传递的是一个 js 表达式
子组件向父组件传参
$emit('信号名'， 参数 1，参数 2，参数 3...参数 n)//
注意： 此处信号名。始终是横线连接 (kebab-case)，再页面中也是这种方式，如下 send-data。
// 备注： 如果使用过 Qt 的话其实有点类似 Qt 的信号发送，只不过关联方式不一样的，思想都是一样的。
父组件接受子组件传入的参数
例子完整代码展示
例子显示效果
文档来源：51CTO技术博客https://blog.51cto.com/heboyme/2998311
页:
[1]