快捷導(dǎo)航

Vue中父子組件通訊之todolist組件功能開發(fā)

更新時(shí)間：2018年05月21日 09:17:10 作者：starof

這篇文章主要介紹了Vue中父子組件通訊——todolist組件功能開發(fā)的相關(guān)知識(shí),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、todolist功能開發(fā)

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

二、todolist組件拆分

定義組件，組件和組件之間通訊

1、全局組件

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

2、局部組件

要注冊(cè)，否則會(huì)報(bào)錯(cuò)：

vue.js:597 [Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

<!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>
 <div id="root">
  <div>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </div>
  <ul>
   <todo-item></todo-item>
  </ul>
 </div>
 <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、組件傳值

父組件向子組件傳值是通過(guò)屬性的形式。

<div id="root">
  <div>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </div>
  <ul>
   <todo-item 
    v-for="(item ,index) of list"
    :key="index"
    :content="item"
   ></todo-item>
  </ul>
 </div>
 <script>
 Vue.component('todo-item',{
  props: ['content'], //接收從外部傳遞進(jìn)來(lái)的content屬性
  template:'<li>{{content}}</li>'
 })
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>

三、組件與實(shí)例的關(guān)系

new Vue()實(shí)例

Vue.component是組件

每一個(gè)Vue組件又是一個(gè)Vue的實(shí)例。

任何一個(gè)vue項(xiàng)目都是由千千萬(wàn)萬(wàn)個(gè)vue實(shí)例組成的。

每個(gè)vue實(shí)例就是一個(gè)組件，每個(gè)組件也是vue的實(shí)例。

四、實(shí)現(xiàn)todolist的刪除功能

子組件通過(guò)發(fā)布訂閱模式通知父組件。

<div id="root">
  <div>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </div>
  <ul>
   <todo-item 
    v-for="(item ,index) of list"
    :key="index"
    :content="item"
    :index="index"
    @delete='handleDelete'
   ></todo-item>
  </ul>
 </div>
 <script>
 Vue.component('todo-item',{
  props: ['content','index'], //接收從外部傳遞進(jìn)來(lái)的content屬性
  template:'<li @click="handleDeleteItem">{{content}}</li>',
  methods:{
   handleDeleteItem:function(){
    this.$emit('delete',this.index);
   }
  }
 })
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   },
   handleDelete:function(index){
    this.list.splice(index,1);
   }
  }
 })
 </script>

總結(jié)

以上所述是小編給大家介紹的Vue中父子組件通訊之todolist組件功能開發(fā)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: