今回は、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 コンポーネントの分割
、コンポーネント間で通信する 再帰コンポーネントの場合必ず「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>'
})
...
値を渡す
親コンポーネントは、属性の形式で子コンポーネントに値を渡します。
<!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. コンポーネントとインスタンスの関係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>
以上がVue で親子コンポーネントを使用して todolist コンポーネントと通信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。