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>

2. 親コンポーネントが DOM を送信

まずサンプルを確認します ビューアを開いて確認してください

が見つかりました

。

公式ドキュメントを参照してください。

https://

cn.vuejs.org/v2/guide/components-slots.html

<p>Qin</p>1 子に 要素が含まれていない場合は、渡されたコンテンツは破棄されます

スロット

  <p> 
    <child><p>Qin</p></child>
  </p>
  <script> 
   let child = {
     template :`<p>
           <p>hello world</script>

          `    }    var vm = new Vue({      el:'#root',      components:{        child      }     })    を追加したところ、Qin は正常に表示され、そのスロットは解析されたフラグメント /p > に置き換えられることがわかりました。

親コンポーネントが子コンポーネントに値を渡さない場合、スロットは親コンポーネントのデフォルト値としても表示されます

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

レンダリング

名前付きスロット

複数使用したい場合スロット、最初に効果を見てみましょう:

  <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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

VeeValidate を使用して vue プロジェクトでフォーム検証を実行する方法

vue を使用して 2048 ミニ ゲームを実装する方法

以上がVue での親子コンポーネントの値の転送とスロットの使用状況の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。