vue.js实战笔记：父子组件之间的那些事儿

父组件向子组件传递数据

---

父组件向子组件传递数据：
栗子1：父组件A向子组件A-1传递参数：currStudentId，有两种传递方式：

---

第一种传递方式，是使用静态传递方式，打个比方A-1组件中，需要的是一个固定的值，常量，那么，可以使用这种传递方式，语法：

//子组件A-1
Vue.component('A-1', {
  // 声明 props
  props: ['currStudentId'],
  data: function() {
        return {
            page: 1
        }
    }
  // 就像 data 一样，prop 可以用在模板内
  template: '<span>{{ currStudentId }}</span>'
})
//父组件A
<A-1 curr-student-id='1'></A-1>

需注意，这里使用curr-student-id而不能使用currStudentId，因为VUE规定：
HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名

---

第二种传递方式，是使用动态传递方式，和静态传递方式不同，我们要传递的是非固定的值。

//子组件A-1
Vue.component('A-1', {
  // 声明 props
  props: ['currStudentId'],
  data: function() {
        return {
            page: 1
        }
    }
  // 就像 data 一样，prop 可以用在模板内
  template: '<span v-model="currStudentId"></span>'
})

//父组件A中使用A-1组件
<A-1 :curr-student-id='studentId'></A-1>

---

子组件向父组件传递数据（改变父组件数据）

---

//子组件A-1
Vue.component('A-1', {
  // 声明 props
  props: ['currStudent'],
  data: function() {
        return {
            page: 1
        }
    },
    methods: {
        changeStudent: function() {
            this.currStudent.name="xyz";
        }
    }
})

//父组件A

<A-1 curr-student='currStudent'></A-1>
父组件中A中data数据格式如下：

data() {
    return {
        currStudent: {
            name: ''
        }
    }
}

在vue2.0之后的版本中，不允许子组件直接改变父组件的数据，在1.0的版本中可以这样操作的，但是往往项目需求需要改变父组件的数据，2.0也是可一个，区别是，当我们把父元素的数据给子组件时，需要传一个对象，子组件通过访问对象中的属性操作数据

---

父组件操作子组件的方法

//子组件A-1：
Vue.component('A-1', {
  // 声明 props
  props: ['currStudentId'],
  data: function() {
        return {
            page: 1
        }
    }
  // 就像 data 一样，prop 可以用在模板内
  template: '<span v-model="currStudentId"></span>',
  methods: {
      showStudents() {
          console.info("students");
      }
  }
})

//父组件
<A-1 :curr-student-id='studentId' ref="studentComponent"></A-1>

this.$refs.studentComponent.showStudents();

---

子组件和父组件监听事件

栗子：子组件A-1触发父组件A。

---

//子组件A-1
Vue.component('A-1', {
  data: function() {
        return {
            page: 1,
            student: ''
        }
    }
  // 就像 data 一样，prop 可以用在模板内
  template: '<span v-model="currStudentId"></span>',
  methods: {
    studentPick: function() {
        //$emit触发
        this.$emit('set-student', this.student);
    }
  }
})

//父组件A中添加监听
<A-1 @set-student="setStudent"></A-1>

//父组件中添加方法setStudent
methods: {
    //.......other methods
    setStudent: function(studentInfo){
        //studentInfo是自组件触发传过来的
    }
}