ホームページ  >  記事  >  ウェブフロントエンド  >  Vue での親子コンポーネントの値の転送とスロットの使用状況の分析

Vue での親子コンポーネントの値の転送とスロットの使用状況の分析

php中世界最好的语言
php中世界最好的语言オリジナル
2018-06-01 10:37:071492ブラウズ

今回は、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 を送信

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

が見つかりました

Vue での親子コンポーネントの値の転送とスロットの使用状況の分析

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

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>

レンダリング

Vue での親子コンポーネントの値の転送とスロットの使用状況の分析

名前付きスロット

複数使用したい場合スロット、最初に効果を見てみましょう: Vue での親子コンポーネントの値の転送とスロットの使用状況の分析

  <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      }     })    コードを変更します。

表示が表示されますが、これは正常です

Vue での親子コンポーネントの値の転送とスロットの使用状況の分析この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

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

Vue での親子コンポーネントの値の転送とスロットの使用状況の分析

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。