组件开发

那些数据是可相应的

1、data里的数据.
2、对于对象,直接通过索引等去改是不可相应的.需要借助split等对象的方法.
3、对于对象添加新的键值对,需要通过set方法添加.才可相应

组件式的开发思想,业务分散到各个组件中,自定义标签一样.
原生的checkbox,input和select等 ,扩张性差.
先写出来,后写好.引入了vue.js文件而已,开发基础的组件库.
有复杂逻辑的提出来.

父到子的数据传递props

1、props:单向数据流,父组件发生变化,子组件变化.子组件变化,父组件不变.vue给了一个警告,他为什么警告呢,这个数据不是组件本身的,是父组件传过来的.不建议去改他,
为了防止,后期数据流向不明,为什么有修改props的冲动,的两种原因
一种、只是作为初始值传入,传入后子组件变化,父组件不变。

props:["age"],
data(){
  return {
        m:this.age
     }
}

二种、作为初始值传入,子组件进行二次加工。借助计算属性。

props:["age"],
data(){
  return {
        m:this.age
     }
},
computed:{
    jos(){
        return  "年龄" + this.age
    }
}

3、data里不能运算,但是可以赋值.data赋值,是不会随依赖改变而改变的.
计算属性才可以

子到父组件通信

第一步、触发事件

this.$emit("change","值")

第二步、父组件在,在子组件上用v-on监听这个事件,触发父组件中的方法.


父组件
methods:{
    change(e){
      alert(e)
  }
}

你可能感兴趣的:(组件开发)