Vue 상위-하위 구성요소 값 전송 및 슬롯 적용 단계에 대한 자세한 설명

이번에는 Vue 상위-하위 구성 요소의 값 전송 및 슬롯 적용 단계에 대해 자세히 설명하겠습니다. Vue 상위-하위 구성 요소 및 슬롯 적용에 대한 주의 사항은 무엇입니까? 바라보다.件 1. 아버지와 아들 구성 요소 전송

  <script> //父组件向子组件传值用 props ,加：号后传递的为js表达式,示例中则为数字，不加:号代表的是字符串 var counter = { //局部注册 props:[&#39;count&#39;], data:function(){//在子组件中定义数据，data不能是对象,必须是一个函数。 return { number:this.count } }, template:&#39;<p @click="handleClick2">{{number}}&#39;, methods:{ handleClick2:function(){ this.number ++; //this.count++; 父组件可以传值给子组件,但子组件不可以修改父组件属性,这里这么写会报错。 this.$emit("numberchange",this.number);//子组件向父组件传递事件,值 } } } var validateContent = { props:{ //content:[Number,String] //组件参数校验，可以多选 content:{//组件参数校验 type:String, required:true, default:"default value", validator:function(value){ return value.length > 5 } } }, template:&#39;<p >{{content}}&#39;, } var vm = new Vue({ el:&#39;#root&#39;, data:{ total:0 }, methods:{ handleChange:function(number){ console.log(number) // this.total +=1; } }, components:{ counter, //局部注册要在根节点注册组件 validateContent } }) </script> e 2. 상위 구성 요소는 DOM을 전송하여

먼저 샘플을 확인하고 뷰어를 열어

qin을 찾았습니다.

공식 문서(https://

cn.vuejs.org/v2/guide/comComponents-slots.html)를 확인하세요.

우리는 결론에 도달했습니다. 하위 항목에 전달된 콘텐츠는 삭제됩니다

<p>Qin</p>1 슬롯

을 추가한 결과 Qin이 정상적으로 표시될 수 있으며 해당 슬롯은 구문 분석된 조각 상위 구성 요소가 하위 구성 요소에 값을 전달하지 않으면 슬롯이 상위 구성 요소의 기본값으로 나타날 수도 있습니다.

Rendering

이름이 지정된 슬롯

여러 개를 사용하려는 경우 Slots , 먼저 효과를 살펴보겠습니다.

여러 머리글과 바닥글이 있음을 발견했습니다. 이 문제를 해결하려면 명명된 슬롯을 사용해야 합니다. 코드를 다음과 같이 수정합니다.

                    `    }    var vm = new Vue({      el:'#root',      components:{        child      }     })   

디스플레이를 볼 수 있습니다. 정상입니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JavaScript DOM 요소를 추가, 삭제 및 수정하는 단계에 대한 자세한 설명

VueValidate 양식 확인 사용 사례 코드 분석 vue 프로젝트

위 내용은 Vue 상위-하위 구성요소 값 전송 및 슬롯 적용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!