ホームページ >ウェブフロントエンド >jsチュートリアル >Vue で親子コンポーネントを使用して todolist コンポーネントと通信する方法
Vue で親子コンポーネントを使用して todolist コンポーネントと通信する方法
- php中世界最好的语言オリジナル
- 2018-05-28 14:48:512116ブラウズ
今回は、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>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: vue2.0 を使用してナビゲーション ガードを実装する方法
以上がVue で親子コンポーネントを使用して todolist コンポーネントと通信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。