详解vue.js数据传递以及数据分发狭槽

一、组件间的数据传递

1.父组件获取子组件的数据

*子组件把自己的数据，发送到父级

*vm .$emit(事件名，数据);

* v-: @

示例用法：当点击派遣按钮的时候，"111"变成"我是子组件的数据"

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题父级获取子级的数据/title脚本src=' http : bower _ components/vue/dist/vue。js /脚本样式/style/head dydiv AAA/AAA/div模板跨度我是父级- {{msg}}/span //自动调用得到方法、@子消息和下面的这个$emit('child-msg '，this.a)相对应BBB @ child-msg=' get '/BBB/模板模板H3子组件-/h3输入类型='按钮'值=' send ' @ click=' send '/模板脚本var VM=new Vue({ El : ' # box }，data:{ a:'aaa' }，components 3360 { ' AAA ' : { data : function(){ return { msg :111，msg2: '我是父组件的数据} }，template:'#aaa '，methods:{ //这里的味精实际上就是子组件传递给父组件的数据get :函数(msg){ this。味精=味精；} }，组件： { ' BBB ' : { data : function(){ return { a : '我是子组件的数据} }，template:'#bbb '，方法： { send : function(){ this .$emit('child-msg '，这。a)；} } } } } } });/script/body/html2、子组件获取父组件的数据

在调用子组件：

bbb :m='数据/bbb

子组件之内：

prop :[' m '，' myMsg ']prop : { ' m ' : string，' myMsg':Number}！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题自己获取父级的数据/title脚本src=' http : bower _ components/Vue/dist/Vue。js '/脚本样式/style/headdydiv { { a } }/div AAA { { msg } }/AAA/div模板h 111111/h1 BBB :mm=' msg 2 ' : my-msg=' msg '/BBB/模板脚本var VM=new Vue({ El : ' # box '，数据： { a3a我是父组件的数据} }，template:'#aa '，组件： { ' BBB ' : { prop s : { ' mmm ' : string，' myMsg':Number }，template:'h3我是血脑屏障组件-{ { mmm } } br { { myMsg } }/H3 ' } } })；/脚本/正文/html

运行结果：

二、内容分发：

Vue.js提供了一种混合父组件内容与子组件自己模版的方式：批次，用来占一个位置

1、基本用法

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题槽保留原来的位置/title脚本src=' http : bower _ components/vue/dist/vue。js /脚本样式/style/headdy div AAA ul Li 1111/Li Li 2222/Li Li 3333/Li/ul/AAA HR AAA/AAA/div模板h1 xxxx/h1插槽这是默认的情况/slot pwel come Vue/p/template脚本var VM=new Vue({ El : ' # box '，data:{ a:'aaa' }，components 3360 { ' AAA ' : { template : ' # AAA ' } } })；/脚本/正文/html运行结果：ul标签里面的内容没有被覆盖，如果不使用插槽，ul标签里的内容将会被覆盖

2、插槽的名字属性

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题槽中名字属性的使用/title脚本src=' http : bower _ components/vue/dist/vue。js /脚本样式/style/head dydiv AAA ul slot=' ul-slot '//这里狭槽的名字要与下面狭槽中名字属性相对应Li 1111/Li Li 2222/Li Li 3333/Li/ul ol插槽=' ol-slot '//用法同上Li 111/Li Li 222/Li Li 333/Li/ol/AAA HR AAA/AAA/div模板h1 xxxx/h1插槽名称="ol-slot "这是默认的情况/slot//设置名字属性，给狭槽命名p elcome vue/p插槽名称='ul-slot '这是默认的情况2/插槽/模板脚本var VM=new Vue({ El : ' # box '，data:{ a:'aaa' }，components 3360 { ' AAA ' : { template : ' # AAA ' } } })；/脚本/正文/html运行结果：