本文主要给大家通过代码实例分析了vue.js数据传递以及数据分发slot的相关知识，有这方面兴趣的朋友参考下吧，希望能帮助到大家。
一、组件间的数据传递
1.父组件获取子组件的数据
*子组件把自己的数据，发送到父级
*vm.$emit(事件名,数据);
立即学习“前端免费学习笔记（深入）”；
*v-on: @
示例用法：当点击send按钮的时候，“111”变成“我是子组件的数据”
父级获取子级的数据 我是父级 -> {{msg}} //自动调用get方法，@child-msg和下面的this.$emit('child-msg',this.a)相对应
子组件-
2、子组件获取父组件的数据
在调用子组件：
子组件之内:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}自己获取父级的数据
{{a}}
{{msg}} 11111
运行结果：
二、内容分发：
Vue.js提供了一种混合父组件内容与子组件自己模版的方式:slot，用来占一个位置
1、基本用法
slot保留原来的位置
- 1111
- 2222
- 3333
xxxx
这是默认的情况 welcome vue
运行结果：ul标签里面的内容没有被覆盖，如果不使用slot,ul标签里的内容将会被覆盖
2、slot的name属性
slot中name属性的使用
//这里slot的名字要与下面slot中name属性相对应
- 1111
- 2222
- 3333
//用法同上
- 111
- 222
- 333
xxxx
这是默认的情况 //设置name属性，给slot命名welcome vue
这是默认的情况2
运行结果：
相关推荐：
