ホームページ  >  記事  >  ウェブフロントエンド  >  Vue コンポーネントとは何ですか? Vue コンポーネントを使用するにはどうすればよいですか? (コード例)

Vue コンポーネントとは何ですか? Vue コンポーネントを使用するにはどうすればよいですか? (コード例)

青灯夜游
青灯夜游転載
2018-10-24 17:38:372266ブラウズ

この記事では、Vue コンポーネントとは何かについて説明します。 Vue コンポーネントを使用するにはどうすればよいですか? (コード例)。困っている友人は参考にしていただければ幸いです。

コンポーネントの紹介

  1. コンポーネント システムは、大きなインターフェイスを小さな制御可能なユニットに分割します。

  2. コンポーネントは再利用可能で保守可能です。

  3. このコンポーネントは強力なカプセル化を備えており、使いやすいです。

  4. 大規模なアプリケーションでは、コンポーネント間の相互作用を切り離すことができます。

#Vue コンポーネントの使用

  • グローバル コンポーネントの使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
    </div>


    <script>
        //全局组建的定义
        Vue.component("my-header", {
            template: '<h1>全局组件</h1>'
        });
        var app = new Vue({
            el: '#app',
        });
    </script>

</body>

</html>
  • ローカル コンポーネントの使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
    </div>


    <script>
        //局部组件定义
        var app = new Vue({
            el: '#app',
            components: {
                'my-header': {
                    template: '<h1>局部组件</h1>'
                }
            }
        });
    </script>

</body>

</html>
  • 特徴コンポーネント データの

  • #
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
        <my-header></my-header>
        <br>
        <my-header1></my-header1>
        <my-header1></my-header1>
    </div>

    <script>
        //组件数据之间不共享,Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数
        //组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行,这样就不会影响其它组件,通过下面两个例子可以看出
        var data = {
            count: 0
        };
        var app = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue!!!"
            },
            components: {
                'my-header': {
                    template: '<h1 v-on:click="changeCount">{{count}}</h1>',
                    data: function() {
                        return data;
                    },
                    methods: {
                        changeCount: function() {
                            this.count++;
                        }
                    }
                },
                'my-header1': {
                    template: '<div v-on:click="changeCount1">{{count}}</div>',
                    data: function() {
                        return {
                            count: 0
                        };
                    },
                    methods: {
                        changeCount1: function() {
                            this.count++;
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>
  • Vue インスタンスとコンポーネントの関係

Vue コンポーネントは実際には拡張可能な Vue インスタンスです。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>

    <script>
        //Vue组件其实是一个可扩展的Vue实例,Vue实例也可以看成是一个组件
        // var app = new Vue({
        //     el: '#app',
        //     template: '<h1>app应用</h1>'
        // });
        //使用继承实现Vue组件
        var myComponent = Vue.extend({
            data: function() {
                return {
                    message: "Hello Vue@@@"
                }
            }
        });
        var vm = new myComponent({
            el: '#app'
        });
    </script>

</body>

</html>
  • Vue コンポーネントのテンプレート メソッド

  1. \

  2. `

  3. <スクリプトタイプ= "text/x-template">

  4. .vue 単一ファイル

  5. <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <my-header></my-header>
            <my-header-1></my-header-1>
            <my-header-2></my-header-2>
            <my-header-3></my-header-3>
        </div>
    
    
        <template id="temp">
                <div>
                    <p>
                        <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                            </ul>
                        </p>
                    </div>
        </template>
        <script type="text/x-template" id="temp1">
            <div>
                <p>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </p>
            </div>
        </script>
        <script>
            //Vue模版添加方式
            var app = new Vue({
                el: '#app',
                components: {
                    'my-header': {
                        template: '<div>\
                                        <p>\
                                            <ul>\
                                                <li>1</li>\
                                                <li>2</li>\
                                                <li>3</li>\
                                            </ul>\
                                        </p>\
                                    </div>',
                        data: function() {
                            return {
                                message: "第一项"
                            }
                        }
                    },
                    'my-header-1': {
                        template: `<div>
                                        <p>
                                            <ul>
                                                <li>1</li>
                                                <li>2</li>
                                                <li>3</li>
                                            </ul>
                                        </p>
                                    </div>`,
                    },
                    'my-header-2': {
                        template: '#temp'
                    },
                    'my-header-3': {
                        template: '#temp1'
                    }
    
                }
            });
        </script>
    
    </body>
    
    </html>
  • Vue の親コンポーネントは子コンポーネント (props) と通信します

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 数据在组件中 -->
        <my-header></my-header>
        <!-- 父组件向子组件传递数据 -->
        <my-header-1 :list="temp_2_list"></my-header-1>
        <!-- 父组件向子组件传递数据不给值 -->
        <my-header-1></my-header-1>

    </div>
    <!-- 数据在组件中的模版 -->
    <template id="temp-1"> 
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in list">{{item}}</li>
                    </ul>
                </div>
    </template>
    <!-- 父组件向子组件传递数据的模版 -->
    <template id="temp-2">
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in list">{{item}}</li>
                    </ul>
                    <my-nav :itemlist = "list"></my-nav>
                </div>
    </template>
    <!-- 子组件向子组件传递数据的模版 -->
    <template id="temp-3">
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in itemlist">{{item}}</li>
                    </ul>
                </div>
    </template>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //数据在自己组件中的实例
                'my-header': {
                    template: '#temp-1',
                    data: function() {
                        return {
                            list: ["1", "2", "3"],
                            message: "组件中的数据"
                        };
                    }
                },
                //父组件向子组件传递数据
                'my-header-1': {
                    //props: ["list"],
                    template: '#temp-2',
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    //子组件的子组件
                    components: {
                        'my-nav': {
                            template: '#temp-3',
                            data: function() {
                                return {
                                    message: "子组件中的子组件"
                                };
                            },
                            props: ["itemlist"]
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>
  • 子コンポーネントは親コンポーネント (EmitEvents) と通信します

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header-1 :list="temp_2_list"></my-header-1>

    </div>
    <!-- 父组件向子组件传递数据的模版 -->
    <template id="temp-2">
        <div>
                <h1>{{message}}</h1>
                <ul>
                    <li v-for="item in list">{{item}}</li>
                </ul>
                <my-nav :itemlist = "list" v-on:change-events="getChildContent"></my-nav>
            </div>
</template>
    <!-- 子组件向子组件传递数据的模版 -->
    <template id="temp-3">
        <div>
                <h1>{{message}}</h1>
                <ul>
                    <li v-for="item in itemlist" v-on:click="getContent">{{item}}</li>
                </ul>
            </div>
</template>

    <script>
        //子组件向父组件传递数据,是发布订阅模式
        var vm = new Vue({
            el: '#app',
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //父组件向子组件传递数据
                'my-header-1': {
                    //props: ["list"],
                    template: '#temp-2',
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    methods: {
                        getChildContent: function(str) {
                            debugger
                            alert(str);
                        }
                    },
                    //子组件的子组件
                    components: {
                        'my-nav': {
                            template: '#temp-3',
                            data: function() {
                                return {
                                    message: "子组件中的子组件"
                                };
                            },
                            props: ["itemlist"],
                            methods: {
                                getContent: function(ev) {
                                    // console.log(this);
                                    // console.log(ev.target.innerHTML);
                                    this.$emit("change-events", ev.target.innerHTML);
                                }
                            }
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>
  • # Vue の非親子コンポーネントの通信

    ##カスタム イベントを使用した空のインスタンス
    1. $emit
    2. $on
    Vuex 状態管理
    1. 状態
    2. ミューテーション
    3. コミット
    空のインスタンスとカスタム イベントの使用 (小規模プロジェクトに適しています)
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-header-1></my-header-1>
        <my-header-2></my-header-2>

    </div>

    <script>
        //非父子组件通信

        //1.0 使用空实例进行非父子组件通信
        //定义空实例
        //创建步骤是:
        //1、首先定义一个空实例 
        //2、需要给被传递数据的A组件使用$emit绑定自定义事件,并将A组件的数据发布给B组件 
        //3、使用$on订阅A组件发布过来的数据,从而获取数据
        var busVm = new Vue();
        var vm = new Vue({
            el: '#app',
            components: {
                //组件B
                'my-header-1': {
                    template: `<h1>{{message}}</h1>`,
                    data: function() {
                        return {
                            message: "非父子组件通信"
                        };
                    },
                    mounted() {
                        //使用bind(this)修正this
                        busVm.$on("changeEnvents", function(param) {
                            this.message = param;
                        }.bind(this));
                    },
                },
                //组件A
                'my-header-2': {
                    template: `<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>`,
                    data: function() {
                        return {
                            list: ["第一项", "第二项", "第三项"]
                        };
                    },
                    methods: {
                        getContent: function(ev) {
                            busVm.$emit("changeEnvents", ev.target.innerHTML);
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

Vuex 状態管理

    # #Vue コンポーネントのコンテンツの配布
  • 単一
    • ##
      <!DOCTYPE html>
      <html>
      
      <head>
          <meta charset="utf-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <title>Page Title</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
          <style>
              ul {
                  list-style-type: none;
              }
          </style>
      </head>
      
      <body>
          <div id="app">
              <my-header-1>
                  <h1>我是标题</h1>
              </my-header-1>
      
              <my-header-1>
                  <my-header-2></my-header-2>
              </my-header-1>
      
          </div>
      
          <script>
              //单插槽<slot></slot>
              var vm = new Vue({
                  el: '#app',
                  components: {
                      'my-header-1': {
                          template: `<div>我是头部:<slot></slot></div>`,
      
                      },
                      'my-header-2': {
                          template: `<h1>我是标题</h1>`,
                      }
                  }
              });
          </script>
      
      </body>
      
      </html>

    複数の タグは
    • <!DOCTYPE html>
      <html>
      
      <head>
          <meta charset="utf-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <title>Page Title</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
          <style>
              ul {
                  list-style-type: none;
              }
          </style>
      </head>
      
      <body>
          <div id="app">
             
              <my-header-1>
                  <button slot="left">←</button>
                  <button slot="right">→</button>
              </my-header-1>
      
          </div>
      
          <script>
      
      
              //多插槽的使用,则使用name属性来指定要插入的位置
              var vm = new Vue({
                  el: '#app',
                  components: {
                      'my-header-1': {
                          template: `<div><slot name="left"></slot> 我是头部:<slot name="right"></slot></div>`,
                      },
                      'my-header-2': {
                          template: `<h1>我是标题</h1>`,
                      }
                  }
              });
          </script>
      
      </body>
      
      </html>

    • デフォルト値
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <style>
            ul {
                list-style-type: none;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
    
            <my-header-1>
                <button slot="left">←</button>
                <button slot="right">→</button>
            </my-header-1>
    
        </div>
    
        <script>
            //多插槽的使用,则使用name属性来指定要插入的位置
            var vm = new Vue({
                el: '#app',
                components: {
                    'my-header-1': {
                        template: `<div><slot name="left"></slot> 我是头部:<slot name="right"><button slot="right">+</button></slot></div>`,
                    },
                    'my-header-2': {
                        template: `<h1>我是标题</h1>`,
                    }
                }
            });
        </script>
    
    </body>
    
    </html>
    # を使用します
  • ##Vue コンポーネント開発プロセス
    • 基本的な HTML と CSS の記述

      #抽出コンポーネント
    1. #データ送信
    2. ##コンテンツ配布

    3. ##イベントとメソッドの追加

    4. #Vue での DOM 操作 ($refs を使用)

    5. <!DOCTYPE html>
      <html>
      
      <head>
          <meta charset="utf-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <title>Page Title</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
      </head>
      
      <body>
          <div id="app">
              <my-header-1 :list="temp_2_list"></my-header-1>
      
          </div>
          <!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作,使用this.$refs.row获取添加特性的DOM元素 -->
          <template id="temp-2">
              <div>
                      <h1>{{message}}</h1>
                      <ul >
                          <li  v-for="item in list" v-on:click="updateStyle" style="color:blue" ref="row">{{item}}</li>
                      </ul>
                      
                  </div>
            </template>
      
          <script>
              //子组件向父组件传递数据,是发布订阅模式
              var vm = new Vue({
                  el: '#app',
                  data: {
                      temp_2_list: ["1", "2", "3"]
                  },
                  components: {
                      //父组件向子组件传递数据
                      'my-header-1': {
                          //props: ["list"],
                          template: '#temp-2',
                          data: function() {
                              return {
                                  message: "父组件向子组件传递数据"
                              };
                          },
                          //属性的验证与默认值
                          props: {
                              list: {
                                  type: Array,
                                  default: ["4", "5", "6"]
                              }
                          },
                          methods: {
                              updateStyle: function(ev) {
                                  ev.target.style.color = 'red';
                                  // this.$refs.row.style.color = 'red';
                                  console.log(this.$refs.row);
                                  this.$refs.row.forEach(element => {
                                      console.log(element);
                                      element.style.color = 'red';
                                  });
                              }
                          }
                      }
                  }
              });
          </script>
      </body>
      </html>

    以上がVue コンポーネントとは何ですか? Vue コンポーネントを使用するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。