vue コンポーネントとは何ですか? Vue コンポーネントの概要

vue コンポーネントとは何ですか?コンポーネントは再利用可能な Vue インスタンスです。これは基本的に、data、computed、watch、メソッド、フィルター、vue コンポーネントのライフサイクル フックなどのメンバー属性を含むオブジェクトです。この記事では、vue コンポーネントの内容について詳しく説明します。

まずコンポーネントの構造を見てみましょう:

{
  data(){
    return {
      //
    }
  },
  computed:{
    displayName(){
      return '';
    }
  },
  methods:{
    onClickHandler(params){
      // do something
    }
  }
}

基本知識:

data 属性

data 属性はコンポーネントの内部状態を維持し、通常の状況では他のコンポーネントは表示されません。

現在、その変更を監視する方法がわかりません。

計算された属性とリッスンする属性の監視は応答する依存関係の変更のみを監視でき、$refs は応答しないためです。

は props を介して子コンポーネントに渡すことができ、

は $emit を介して親コンポーネントに渡すことができます。

子コンポーネントの内部状態は、this.$refs.ref を介して取得できます。 $data;

コンポーネントのデータ オプションは関数である必要があります。

  data选项有两种定义方式：
  
  一、对象形式：
  
  ```
  data:{
    //引用该组件的地方，共用一个状态的引用，以至于，只要有一处修改了$data中的某一属性值，其它引用该组件的地方也跟随着改变该属性值（其实，不是跟随，本来就是同一个指向）。
  }
  ```
  
  二、函数形式：
  
  ```
  data(){
    return {
      //引用该组件的地方，每一个组件都会获得独立的引用，互不干扰。
    }
  }
  ```

計算属性、メソッド属性、フィルター

差分	メソッド	計算	フィルター
型	関数	データ変数	関数
用途	イベント処理関数として	データとして	パイプシンボルとして
スコープ	コンポーネント内	コンポーネント内	コンポーネント内(ローカル登録)、グローバル(グローバル登録)
パラメータ	can パラメータあり	パラメータなし (非関数)	パラメータあり
戻り値	不要	必須	必須
トリガーされる	関連する	と対話するとき依存関係 変更が発生した場合にのみ再評価されます	受信データが変更されたときに実行されます

注:

$refs はその変更を監視できないなど、Vue のすべてのプロパティが応答するわけではありません。コンポーネント構築における主な違いは、

テンプレートの生成方法

です。

テンプレート定義方法

テンプレートオプション

文字列テンプレート

HTMLタグ構造で構成される文字列

例:

{
  template: '<h1 id="简单示例">简单示例</h1>',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

IDセレクターで指定されたテンプレート

ID 付き HTML フラグメントスクリプトタグでラップされます。

例:

<script>
  <h1 v-if="level === 1">
    简单示例
  
</script>
{
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

render

この関数は、最初のパラメータとして createElement メソッドを受け取り、VNode を作成します。ノード タイプ、コンポーネント構成オブジェクト、子ノード (コンポーネント構成オブジェクトの公式説明)

例:

{
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

vue 単一ファイル コンポーネント

単一ファイル コンポーネントは、テンプレート、ロジック、スタイルを結合した構造で分離されて保存されます。同じファイルです。

<template>
  <div>
    ...
  </div>
</template>
<script>
...
export default{
  ...
}
...
</script>
<style>
...
</style>

プランの選択

テンプレート単一のファイル1行のシンプルな構造従来の選択

レンダリング
前の2つの解決策がある場合に選択してください問題を解決できない（柔軟性が高い） )		注意：不论选择哪一种方案，定义模板时，一定要有一个非template标签元素作根DOM，有且仅有一个。 vue组件注册方式 局部注册 以上几种方案定义的组件本质上都是一个对象，获取该对象（假设变量名为TabBar），要求只在另一个组件(假设变量名为App)内使用： App组件的配置对象： {   components:{     'tab-bar': TabBar,   } } 这样就是局部注册，该组件TabBar只能在App模板中使用<tab-bar></tab-bar>，其它组件对TabBar不可见。 全局注册 以上几种方案定义的组件本质上都是一个对象，获取该对象（假设变量名为TabBar），要求项目内任何组件可使用： 一般在项目的入口文件（如：脚手架搭建项目的main.js）中： Vue.component('tab-bar',TabBar); 这样就是全局注册，该组件TabBar能在整个项目内使用<tab-bar></tab-bar>，所有组件对TabBar可见。 vue组件生命周期钩子 以下用自己的语言将生命周期钩子表述一下： beforeCreate 在这个时候，生命周期函数已经准备好。 组件实例已经构建，但本组件实例的数据、方法还没有注入； 可以在各个生命周期内通过组件实例this调用根实例上注入的$router、$store等对象。 可以在本生命周期内进行数据初始化； created 在这个时候，当前组件实例this上的属性（$data、props、$methods...）已经注入绑定，可以调用本实例上的成员属性； beforeMount 在进入本生命周期之前，会进行以下判断： 是否有el选项（指定挂载目标）： 有el选项的是根实例； 没有el选项的是非根实例（默认挂载元素为组件调用的位置）； 是否有template选项： 有template选项的是内联模板； 没有template选项的是单文件组件； 个人觉得，还有render选项的判断； 最终这些模板都会转换为render函数进行渲染！！！ 这个生命周期在解析模板，不知道有什么实际用途。 mounted 在本生命周期之前，已经将模板渲染为真实DOM，其中vm.$el为组件实例的根DOM元素； 本生命周期是初始化第三方插件的场所； 必要时候，可以在本生命周期内对DOM进行操作； 本生命周期是获取this.$refs.ref的场所； 相关文章推荐： Vue组件及数据传递详解 Vue组件的开发技巧总结 vue注册组件有几种方法

以上がvue コンポーネントとは何ですか? Vue コンポーネントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。