vue组件间的传值

父传子

父组件：
父组件中引入子组件：

<template>
  <ul>
    <child v-for="(item,index) of task" :key='i' childItem:'item' :childIndex="index">
    
    </child>
  </ul>
</template>

<script>
import child from './child.vue' // 将子组件引入父组件中
export default {
  name: 'parent',
  data () {
      return {
          task:['吃饭','睡觉','打呼噜']
      }
  },
  components: {
    child
  }
}
</script>

父组件向子组件中传值index，使用 :childIndex=‘index’
简单讲就是父亲把自己的变量index绑定给了孩子，孩子要定义一个childIndex公开属性来接受父亲给的变量。

子组件：
子组件接受父组件传递过来的值：

<template>
  <li>
    {{childIndex+1}}. {{childItem}}
  </li>
</template>
<script>
export default {
  name: 'child', 
  props: ['childIndex','childItem'] // 子定义公开的属性用于接住父给的变量值
}
</script>

使用props接受父组件的传递过来的值;
props中的属性的用法和data中的模型变量的用法完全一样，但是不能修改。

页面效果

子传父

现在我需要给每一行加一个删除事件，就需要删除父组件中task中的元素。
父组件：

<template>
  <ul>
    <child v-for="(item,index) of task" :key='i' @childDel="del" childItem:'item' :childIndex="index">
    </child>
  </ul>
</template>

<script>
import child from './child.vue' // 将子组件引入父组件中
export default {
  name: 'parent',
  data () {
      return {
          task:['吃饭','睡觉','打呼噜']
      }
  },
  methods: {
    del (index) {
      this.task.splice(index, 1)
    }
  },
  components: {
    child
  }
}
</script>

父需要在引用的子组件上添加一个自定义事件，并绑定父组件的一个处理函数。

子组件：

<template>
  <li @click='del'>
    {{childIndex+1}}. {{childItem}}
  </li>
</template>
<script>
export default {
  name: 'child', 
  del () {
      this.$emit('childDel', this.childIndex)
   }
  props: ['childIndex','childItem'] // 子定义公开的属性用于接住父给的变量值
}
</script>

孩子需要通过 $emit(‘父给的自定义事件名’,参数) 触发父给的自定义事件

兄弟组件传值

两兄弟在此，分别是爸爸和叔叔
效果实现：点击叔叔组件中的添加按钮时，将相应的值传到爸爸组件中

<template>
  <div class="home">
    <uncle></uncle>
    <parent></parent>
  </div>
</template>

<script>
// @ is an alias to /src
import uncle from './components/uncle.vue'
import parent from './components/parent.vue'

export default {
  name: 'home',
  components: {
    uncle,
    parent
  }
}
</script>

在src中新建一个js，命名为bus.js

bus.js

import Vue from 'vue'

export default new Vue()

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import bus from './bus' // 引入bus

Vue.config.productionTip = false
Vue.prototype.bus = bus // 将bus挂载到vue原型链中

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

叔叔组件：

<template>
  <div>
    <input type="text" v-model="itmeName">
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: 'uncle',
  data () {
    return {
      itmeName: ''
    }
  },
  methods: {
    add () {
      this.bus.$emit('add_item', this.itmeName) // 去寻找公共的bus对象，用$emit()触发提前绑定在bus上绑定好的事件。
      this.itmeName = ''
    }
  }
}
</script>

<style scoped>

</style>

点击添加按钮触发$emit()事件

爸爸组件：

<template>
  <ul>
    <child v-for="(item,index) of task" :key='index' :childIndex="index" @childDel="del">
      <template slot="task">{{item}}</template>
    </child>
  </ul>
</template>

<script>
import child from './child.vue' // 将子组件引入父组件中
export default {
  name: 'parent',
  data: function () {
    return {
      task: ['吃饭', '睡觉', '打呼噜']
    }
  },
  created () {
    this.bus.$on('add_item', this.add.bind(this)) // 在自己加载完成后，向bus上添加一个自定义的事件，事件要绑定上自己的一个处理函数。
  },
  methods: {
    add (item) {
      this.task.push(item)
    },
    del (index) {
      console.log(index)
      this.task.splice(index, 1)
    }
  },
  components: {
    child
  }
}
</script>