Vue で親子コンポーネントを使用して todolist コンポーネントと通信する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue で親子コンポーネントを使用して todolist コンポーネントと通信する方法

php中世界最好的语言

May 28, 2018 pm 02:48 PM

コンポーネントコミュニケーション

今回は、Vue で親子コンポーネントを使用して todolist コンポーネントと通信する方法を説明します。Vue で親子コンポーネントを使用して todolist コンポーネントと通信するときの注意事項について説明します。ケース、見てみましょう。

1. Todolist 関数の開発

<p id="root">
  <p>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </p>
  <ul>
   <li v-for="(item, index ) of list" :key="index">{{item}} </li>
  </ul>
 </p>
 <script>
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>

ログイン後にコピー

2. Todolist コンポーネントの分割

、コンポーネント間で通信する

1 、グローバルコンポーネント

再帰コンポーネントの場合必ず「name」オプションを指定してください。

 <p id="root">
  <p>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </p>
  <ul>
   <todo-item></todo-item>
  </ul>
 </p>
 <script>
 Vue.component('todo-item',{
  template:'<li>item</li>'
 })
...

ログイン後にコピー

3. コンポーネント

値を渡す

親コンポーネントは、属性の形式で子コンポーネントに値を渡します。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="./vue.js"></script>
</head>
<body>
 <p id="root">
  <p>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </p>
  <ul>
   <todo-item></todo-item>
  </ul>
 </p>
 <script>
 //全局组件
 // Vue.component('todo-item',{
 //  template:'<li>item</li>'
 // })
 var TodoItem={
  template:'<li>item</li>'
 }
 new Vue({
  el:"#root",
  components:{
   'todo-item':TodoItem
  },
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>
</body>
</html>

ログイン後にコピー

3. コンポーネントとインスタンスの関係

new Vue() インスタンス

Vue.component はコンポーネントです

各 Vue コンポーネントは Vue のインスタンスでもあります。

どの Vue プロジェクトも、数千の Vue インスタンスで構成されています。各 vue インスタンスはコンポーネントであり、各コンポーネントは vue のインスタンスでもあります。

4. todolistのdelete

関数を実装する

子コンポーネントはパブリッシュ/サブスクライブモードを通じて親コンポーネントに通知します。

<p id="root">
  <p>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </p>
  <ul>
   <todo-item 
    v-for="(item ,index) of list"
    :key="index"
    :content="item"
   ></todo-item>
  </ul>
 </p>
 <script>
 Vue.component('todo-item',{
  props: ['content'], //接收从外部传递进来的content属性
  template:'<li>{{content}}</li>'
 })
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS で三目並べゲームを作る方法

vue2.0 を使用してナビゲーションガードを実装する方法

以上がVue で親子コンポーネントを使用して todolist コンポーネントと通信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7489

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Windows 10 旧バージョンコンポーネント DirectPlay のインストール方法 Dec 28, 2023 pm 03:43 PM

win10で一部のゲームをプレイすると、画面がフリーズしたり画面がぼやけるなどの不具合が多くのユーザーに発生しますが、現時点ではダイレクトプレイ機能をオンにすることで問題を解決でき、機能の操作方法も非常に簡単です。 win10 の古いコンポーネントである Directplay をインストールする方法 1. 検索ボックスに「コントロールパネル」と入力して開きます 2. 表示方法として大きなアイコンを選択します 3. 「プログラムと機能」を見つけます 4. 左側をクリックして有効にするか、 Win 機能をオフにする 5. ここで古いバージョンを選択しますチェックボックスをオンにするだけです

Vueを使用してカレンダーコンポーネントを実装するにはどうすればよいですか? Jun 25, 2023 pm 01:28 PM

Vue は非常に人気のあるフロントエンドフレームワークであり、コンポーネント化、データバインディング、イベント処理など、開発者が効率的で柔軟で保守が容易な Web アプリケーションを構築するのに役立つ多くのツールと機能を提供します。この記事では、Vueを使ってカレンダーコンポーネントを実装する方法を紹介します。 1. 要件の分析まず、このカレンダーコンポーネントの要件を分析する必要があります。基本的なカレンダーには次の機能が必要です: 当月のカレンダーページの表示、前月または翌月への切り替えのサポート、特定の日のクリックのサポート、

VUE3 開発の基本: extend を使用してコンポーネントを継承する Jun 16, 2023 am 08:58 AM

Vue は現在最も人気のあるフロントエンドフレームワークの 1 つであり、VUE3 は Vue フレームワークの最新バージョンであり、VUE2 と比較してパフォーマンスが高く、開発エクスペリエンスが優れているため、多くの開発者の最初の選択肢となっています。 VUE3 では extends を使ってコンポーネントを継承することが非常に実用的な開発手法となっておりますので、この記事では extends を使ってコンポーネントを継承する方法を紹介します。エクステンドとは何ですか？ Vue では、extends は非常に実用的な属性であり、子コンポーネントが親から継承するために使用できます。

Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Mar 15, 2024 pm 04:51 PM

Angular フレームワークのコンポーネントのデフォルトの表示動作は、ブロックレベルの要素ではありません。この設計の選択により、コンポーネントスタイルのカプセル化が促進され、開発者が各コンポーネントの表示方法を意識的に定義することが促進されます。 CSS プロパティの表示を明示的に設定することで、Angular コンポーネントの表示を完全に制御して、目的のレイアウトと応答性を実現できます。

古いバージョンのwin10コンポーネントの設定を開く方法 Dec 22, 2023 am 08:45 AM

Win10 の古いバージョンのコンポーネントは、デフォルトで閉じられていることが多いため、ユーザー自身が設定で有効にする必要があります。まず、設定を入力する必要があります。操作は非常に簡単です。以下の手順に従ってください。Win10 の古いバージョンはどこにありますか?バージョンコンポーネント? 開く 1. [スタート] をクリックし、[Win システム] をクリックします 2. クリックしてコントロールパネルに入ります 3. 次に、下のプログラムをクリックします 4. [Win 機能を有効または無効にする] をクリックします 5. ここで必要なものを選択できます開く

Vue が JSX を通じてコンポーネントを動的にレンダリングする方法について話しましょう Dec 05, 2022 pm 06:52 PM

Vue はどのようにして JSX を通じてコンポーネントを動的にレンダリングしますか?次の記事では、Vue が JSX を通じてコンポーネントを効率的に動的にレンダリングする方法を紹介します。

Vue コンポーネントの実践: ページングコンポーネントの開発 Nov 24, 2023 am 08:56 AM

Vue コンポーネントの実践: ページングコンポーネント開発の概要 Web アプリケーションでは、ページング機能は不可欠なコンポーネントです。優れたページングコンポーネントは、プレゼンテーションがシンプルかつ明確で、機能が豊富で、統合と使用が簡単である必要があります。この記事では、Vue.js フレームワークを使用して高度にカスタマイズ可能なページングコンポーネントを開発する方法を紹介します。 Vueコンポーネントを使った開発方法をコード例を通して詳しく解説します。テクノロジースタック Vue.js2.xJavaScript (ES6) HTML5 および CSS3 開発環境