Vue에서 상위-하위 구성요소의 값 전송 및 슬롯 사용 분석

이번에는 Vue에서 상위-하위 컴포넌트의 값 전송 및 슬롯 사용에 대한 분석을 가져오겠습니다. Vue에서 상위-하위 컴포넌트 값 전송 및 슬롯 사용에 대한 주의 사항은 무엇입니까? , 살펴 보겠습니다.件 1. 아버지와 아들 구성 요소 전송

nbsp;html>


  <meta>
  <title>父子组件传值</title>
  <style> 
  </style>
  <script></script>


  <p> 
    <counter></counter>
    <counter></counter>
    </p><p>{{total}}</p> 
    <validate-content></validate-content>
  

  <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 슬롯

  <p> 
    <child><p>Qin</p></child>
  </p>
  <script> 
   let child = {
     template :`<p>
           <p>hello world 
        `
   }
   var vm = new Vue({
     el:&#39;#root&#39;,
     components:{
       child
     } 
   })
  </script>

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

  <p> 
    <child><p>Qin</p></child>
  </p>
  <script> 
   let child = {
     template :`<p>
           <p>hello world
           <slot>
        ` 
   }
   var vm = new Vue({
     el:&#39;#root&#39;,
     components:{
       child
     } 
   })
  </script>

Rendering

이름이 지정된 슬롯

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

  <p> 
    <child></child>
  </p>
  <script> 
   let child = {
     template :`<p>
           <p>hello world
           <slot>default value
        `
   }
   var vm = new Vue({
     el:&#39;#root&#39;,
     components:{
       child
     } 
   })
  </script>

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

  <p> 
    <child>
      <header>This is header</header>
      <footer>This is footer</footer> 
    </child>
  </p>
  <script> 
   let child = {
     template :
       `<p> 
           <slot>
           <p>Main content</script>

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

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

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

추천 도서:

VeeValidate를 사용하여 vue 프로젝트에서 양식 확인을 수행하는 방법

vue를 사용하여 2048 미니 게임을 구현하는 방법

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