vue.js 데이터 전송 및 데이터 배포 슬롯 예시에 대한 자세한 설명
- 小云云원래의
- 2018-05-14 17:23:252264검색
이 글은 vue.js 데이터 전송 및 데이터 배포 슬롯에 대한 관련 지식을 주로 코드 예제를 통해 분석합니다. 이 측면에 관심이 있는 친구들이 참고하면 도움이 될 것입니다.
1. 구성 요소 간 데이터 전송
1. 상위 구성 요소는 하위 구성 요소의 데이터를 얻습니다.
*자식 구성 요소는 자체 데이터를 상위 구성 요소로 보냅니다.
*vm.$emit(이벤트 이름, 데이터 ) ;
*v-on: @
사용 예: 전송 버튼을 클릭하면 "111"은 "나는 하위 구성 요소의 데이터입니다"
76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7父级获取子级的数据6e916e0f7d1e588d4f442bf645aedb2f
6ebdbce067bc95e1851e3b8093fd634e2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e388a4556c0f65e1904146cc1a846bee
21faa6d2b39cd643d626023a8aaca7f5
5839c0ca9224f814274f66bf7ba46f9c
94b3e26ee717c64999d7867364b1b4a3
d477f9ce7bf77f53fbcf36bec1b69b7a
45a2772a6b6107b401db3c9b82c049c2我是父级 -> {{msg}}54bdf357c58b8a65c66d7c19c8e4d114
//自动调用get方法，@child-msg和下面的this.$emit('child-msg',this.a)相对应
369642beebf5fc7b730ea03cb679d725eaf2859ee44b5934442adb5b52b718da
21c97d3a051048b8e55e3c8f199a54b2
d477f9ce7bf77f53fbcf36bec1b69b7a
684271ed9684bde649abda8831d4d355子组件-39528cedfa926ea0c01e69ef5b2ea9b0
cd71a9f1a461f9e485615a1e4f95e5d8
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data:function(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
//这里的msg实际上就是子组件传递给父组件的数据
get:function(msg){
this.msg=msg;
}
},
components:{
'bbb':{
data:function(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send:function(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
2가 됩니다. 하위 구성 요소는 상위 구성 요소의 데이터를 가져옵니다. component
하위 구성 요소를 호출할 때:
d7b114c020e498efc92386ccdf352a6eeaf2859ee44b5934442adb5b52b718da
하위 구성 요소 내:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7自己获取父级的数据6e916e0f7d1e588d4f442bf645aedb2f
6ebdbce067bc95e1851e3b8093fd634e2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e388a4556c0f65e1904146cc1a846bee
e388a4556c0f65e1904146cc1a846bee{{a}}94b3e26ee717c64999d7867364b1b4a3
21faa6d2b39cd643d626023a8aaca7f5
{{msg}}
5839c0ca9224f814274f66bf7ba46f9c
94b3e26ee717c64999d7867364b1b4a3
d477f9ce7bf77f53fbcf36bec1b69b7a
4a249f0d628e2318394fd9b75b4636b111111473f0a7621bec819994bb5020d29372a
24ba698398d3c67097270230bd00cab2eaf2859ee44b5934442adb5b52b718da
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var vm=new Vue({
el:'#box',
data:{
a:'a'
},
components:{
'aaa':{
data:function(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aa',
components:{
'bbb':{
props:{
'mmm':String,
'myMsg':Number
},
template:'684271ed9684bde649abda8831d4d355我是bbb组件->{{mmm}} 0c6dc11e160d3b678d68754cc175188a {{myMsg}}39528cedfa926ea0c01e69ef5b2ea9b0'
}
}
}
}
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
실행 결과:
2. 콘텐츠 배포:
Vue.js는 상위 구성 요소의 콘텐츠와 하위 구성 요소의 자체 템플릿을 혼합하는 방법을 제공합니다. 슬롯은 위치를 차지하는 데 사용됩니다
1. 기본 사용법
76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7slot保留原来的位置6e916e0f7d1e588d4f442bf645aedb2f
6ebdbce067bc95e1851e3b8093fd634e2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e388a4556c0f65e1904146cc1a846bee
21faa6d2b39cd643d626023a8aaca7f5
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c61111bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62222bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c63333bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
5839c0ca9224f814274f66bf7ba46f9c
f32b48428a809b51f04d3228cdf461fa
21faa6d2b39cd643d626023a8aaca7f5
5839c0ca9224f814274f66bf7ba46f9c
94b3e26ee717c64999d7867364b1b4a3
d477f9ce7bf77f53fbcf36bec1b69b7a
4a249f0d628e2318394fd9b75b4636b1xxxx473f0a7621bec819994bb5020d29372a
58cb293b8600657fad49ec2c8d37b472这是默认的情况7971cf77a46923278913ee247bc958ee
e388a4556c0f65e1904146cc1a846beewelcome vue94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
실행 결과: ul 태그의 콘텐츠는 덮어쓰이지 않습니다. . 슬롯을 사용하지 않으면 ul 태그의 콘텐츠가 덮어쓰기됩니다
2. 슬롯의 이름 속성
76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7slot中name属性的使用6e916e0f7d1e588d4f442bf645aedb2f
6ebdbce067bc95e1851e3b8093fd634e2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e388a4556c0f65e1904146cc1a846bee
21faa6d2b39cd643d626023a8aaca7f5
ccd4047109ea07979870c366d0ef0770 //这里slot的名字要与下面slot中name属性相对应
25edfb22a4f469ecb59f1190150159c61111bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62222bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c63333bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
0893ef879e1c9084569d28fbef0254fb //用法同上
25edfb22a4f469ecb59f1190150159c6111bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6222bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6333bed06894275b65c1ab86501b08a632eb
f6f112ef45f603be226bc581f9dd5e90
5839c0ca9224f814274f66bf7ba46f9c
f32b48428a809b51f04d3228cdf461fa
21faa6d2b39cd643d626023a8aaca7f5
5839c0ca9224f814274f66bf7ba46f9c
94b3e26ee717c64999d7867364b1b4a3
d477f9ce7bf77f53fbcf36bec1b69b7a
4a249f0d628e2318394fd9b75b4636b1xxxx473f0a7621bec819994bb5020d29372a
ef79bf350fa1af528e8524e7cce352ab这是默认的情况7971cf77a46923278913ee247bc958ee //设置name属性，给slot命名
e388a4556c0f65e1904146cc1a846beewelcome vue94b3e26ee717c64999d7867364b1b4a3
3ead1386f1025b804255952fab9f3bdf这是默认的情况27971cf77a46923278913ee247bc958ee
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
실행 결과:
관련 권장 사항:
js 컴포넌트 SlotMachine 구현 사진 스위칭 효과 제작 복권 system_javascript 기술
위 내용은 vue.js 데이터 전송 및 데이터 배포 슬롯 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.