이번에는 vue.js의 데이터 전송 및 데이터 배포 단계에 대해 자세히 설명하겠습니다. vue.js 데이터 전송 및 데이터 배포 시 주의사항은 무엇인가요?
1. 구성 요소 간 데이터 전송
1. 상위 구성 요소는 하위 구성 요소의 데이터를 얻습니다
*하위 구성 요소는 자체 데이터를 상위 구성 요소로 보냅니다
*vm.$emit(event이름, 데이터);
*v-on: @
사용 예: send 버튼을 클릭하면 "111"은 "나는 하위 구성 요소의 데이터입니다"
nbsp;html> <meta> <title>父级获取子级的数据</title> <script></script> <style> </style> <p> <aaa> </aaa> </p> <template> <span>我是父级 -> {{msg}}</span> //自动调用get方法,@child-msg和下面的this.$emit('child-msg',this.a)相对应 <bbb></bbb> </template> <template> <h3>子组件-</h3> <input> </template> <script> 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); } } } } } } }); </script>
가 됩니다. 2. 하위 구성 요소는 상위 구성 요소의 데이터를 얻습니다
하위 구성요소 호출:
하위 구성 요소 내:
props:['m','myMsg'] props:{ 'm':String, 'myMsg':Number }
nbsp;html> <meta> <title>自己获取父级的数据</title> <script></script> <style> </style> <p> </p><p>{{a}}</p> <aaa> {{msg}} </aaa> <template> <h1>11111</h1> <bbb></bbb> </template> <script> 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:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}' } } } } }); </script>
실행 결과:
2. 콘텐츠 배포:
Vue.js는 상위 구성 요소의 콘텐츠와 하위 구성 요소의 템플릿(위치를 차지하는 데 사용되는 슬롯)을 혼합하는 방법을 제공합니다
1. 기본 사용법
nbsp;html> <meta> <title>slot保留原来的位置</title> <script></script> <style> </style> <p> <aaa> <ul> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </aaa> </p><hr> <aaa> </aaa> <template> <h1>xxxx</h1> <slot>这是默认的情况</slot> <p>welcome vue</p> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ template:'#aaa' } } }); </script>
작업 결과: ul 태그의 내용을 덮어쓰지 않았습니다. 슬롯을 사용하지 않으면 ul 태그의 내용을 덮어쓰게 됩니다
2. 슬롯의 name 속성
nbsp;html> <meta> <title>slot中name属性的使用</title> <script></script> <style> </style> <p> <aaa> <ul> //这里slot的名字要与下面slot中name属性相对应 <li>1111</li> <li>2222</li> <li>3333</li> </ul> <ol> //用法同上 <li>111</li> <li>222</li> <li>333</li> </ol> </aaa> </p><hr> <aaa> </aaa> <template> <h1>xxxx</h1> <slot>这是默认的情况</slot> //设置name属性,给slot命名 <p>welcome vue</p> <slot>这是默认的情况2</slot> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ template:'#aaa' } } }); </script>
이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목하세요!
추천 자료:
위 내용은 vue.js의 데이터 전송 및 데이터 배포 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!