Vue学习之父子组件传参

Green

　　文章目录[隐藏]   

• 前言
  
• 例子
  
• 例子显示效果
  

　　
前言
　　这几天在学习 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 的信号发送，只不过关联方式不一样的，思想都是一样的。

　　父组件接受子组件传入的参数

　　

　　例子完整代码展示

　　
例子显示效果