vue父子组件通信

一、父子组件间通信

vue.js 2.0提供了一个ref 的属性： 可以为子组件指定一个索引id

父组件：

<template>
  <div id='user-login'>
    <h2 class='text-center'>用户登录</h2>
    <form class='form-horizontal' role='form'>
      <user-name ref='uname' placeholder='请输入你的用户名'></user-name>
      <user-submit></user-submit>
    </form>
  </div>
</template>
<style>
  #user-login{
    margin-top: 50px;
  }
</style>

<script>
  import username from './loginName.vue'
  import usersubmit from './loginSubmit.vue'
  export default{
    components: {
      'user-name': username,
      'user-submit': usersubmit
    }
  }
</script>
子组件一：

<template>
  <div>
    <div class='form-group'>
      <label>用户名</label>
      <div>
        <input type='text' class='form-control' v-model="username" :placeholder='username'>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    props: ['placeholder'],
    data: function () {
      return {username: '张三'}
    }
  }
</script>
子组件2：

<template>
  <div class="form-group">
    <div>
      <button type="button" class="btn btn-default" v-on:click="test">提交</button>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
    },
    methods: {
      test () {
        alert(this.$parent.$refs.uname.$data.username)
      }
    }
  }
</script>

二、父子之间通信之自定义事件
父组件：

<template>
  <div id='user-login'>
    <h2 class='text-center'>用户登录</h2>
    <form class='form-horizontal' role='form'>
      <user-name placeholder='请输入你的用户名' @updateUserName="setUserName"></user-name>
      <user-submit></user-submit>
    </form>
  </div>
</template>
<style>
  #user-login{
    margin-top: 50px;
  }
</style>

<script>
  import username from './loginName.vue'
  import usersubmit from './loginSubmit.vue'
  export default{
    components: {
      'user-name': username,
      'user-submit': usersubmit
    },
    data () {
      return {
        username: ''
      }
    },
    methods: {
      setUserName (uname) {
        this.username = uname
      }
    }
  }
</script>

子组件1：

<template>
  <div>
    <div class='form-group'>
      <label>用户名</label>
      <div>
        <input type='text' class='form-control' v-model='username' :placeholder='username' @change='userNameChange'>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    props: ['placeholder'],
    data: function () {
      return {
        username: '张三'
      }
    },
    methods: {
      userNameChange () {
        // 调用父组件的方法
        this.$emit('updateUserName', this.username)
      }
    }
  }
</script>

子组件2：

<template>
  <div class="form-group">
    <div>
      <button type="button" class="btn btn-default" v-on:click="test">提交</button>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {

      }
    },
    methods: {
      test () {
        alert(this.$parent.$data.username)
      }
    }
  }
</script>
三、子组件何时被挂载到父组件上的？动态绑定组件
在mounted时
父组件：

<template>
  <div id='user-login'>
    <h2 class='text-center'>用户登录</h2>
    <form class='form-horizontal' role='form'>
      <user-name placeholder='请输入你的用户名' @updateUserName='setUserName'></user-name>
      <user-area></user-area>
      <user-submit></user-submit>
    </form>
  </div>
</template>
<style>
  #user-login{
    margin-top: 50px;
  }
</style>

<script>
  import username from './loginName.vue'
  import usersubmit from './loginSubmit.vue'
  import userArea from './loginArea.vue'
  export default{
    components: {
      'user-name': username,
      'user-submit': usersubmit,
      'user-area': userArea
    },
    data () {
      return {
        username: ''
      }
    },
    mounted () {
     // alert(this.$children.length) // 结果为4,说明子组件到这里已经挂载上了
      this.$children.forEach(function (cc) {
        cc.$on('childChange', this.setValue)
      }.bind(this))
    },
    methods: {
      setUserName (uname) {
        this.username = uname
      },
      setValue (key, value) {
        this.$data[key] = value
        alert(this.$data[key])
      }
    }
  }
</script>
子组件1：

<template>
  <div>
    <div class='form-group'>
      <label>用户名</label>
      <div>
        <input type='text' class='form-control' v-model='username' :placeholder='username' @change='userNameChange'>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    props: ['placeholder'],
    data: function () {
      return {
        username: '张三'
      }
    },
    methods: {
      userNameChange () {
        // 调用父组件的方法
        this.$emit('updateUserName', this.username)
      }
    }
  }
</script>
子组件2：

<template>
  <div class='form-group'>
    <label class='col-sm-2'>地区</label>
    <div class='col-sm-10'>
      <select v-model='selectedIndex' class='form-group' v-on:change='seletecChange'>
        <option v-for='a in areas' v-bind:value='a.id'>{{a.text}}</option>
      </select>
    </div>
  </div>
</template>

<script>
  export default{
    data () {
      return {
        selectedIndex: 0,
        areas: [
          {'id': 0, 'text': '--请选择--'},
          {'id': 1, 'text': '北京'},
          {'id': 2, 'text': '上海'}
        ]
      }
    },

    methods: {
      seletecChange () {
        this.$emit('childChange', 'userarea', this.selectedIndex)
      }
    }
  }
</script>
子组件3：

<template>
  <div class="form-group">
    <div>
      <button type="button" class="btn btn-default" v-on:click="test">提交</button>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {

      }
    },
    methods: {
      test () {
        alert(this.$parent.$data.username)
      }
    }
  }
</script>
四、搜索框功能

<template>
<div class='form-group'>
  <label class='col-sm-2 control-label'>爱好</label>
  <div class='col-sm-10'>
    <input type='text' class='form-control' v-model='inputText'>
    <br>
    <table class='table table-bordered' v-if='showTable()'>
      <thead>
      <th>类别1</th>
      <th>类别2</th>
      </thead>
      <tbody>
      <tr v-for='f in favs'>
        <td>{{f.class1}}</td>
        <td>{{f.class2}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
</template>

<script>
  export default{
    data () {
      return {
        inputText: '',
        favs: [
          {'class1': '前端开发', 'class2': 'js'},
          {'class1': '后端开发', 'class2': 'java'}
        ]
      }
    },
    methods: {
      showTable () {
        if (this.inputText === '') return false
        return true
      }
    },
    computed: {
      getFavs () {
        return this.favs.filter(function (value) {
          if (value.class2.indexOf(this.inputText) >= 0) {
            return true
          } else {
            return false
          }
        }.bind(this))
      }
    }
  }
</script>

getFavs 方法返回一个新的数组，array.filter(callback) 回调函数内部做了判断，最后返回符合判断条件的新的数据。