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

php中世界最好的语言
リリース: 2018-05-28 14:48:51
オリジナル
2068 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!