Vue2基础

48.scoped

style加上这个属性就表示这个样式是只属于该组件的而不是全局

scoped原理

1.这样有scoped属性会使得该组件内的标签都被添加data-v-hash值的属性

2.css选择器都被添加[data-v-hash值]的属性选择器

这样就不会出现多个不同的组件出现样式冲突的情况

49.data是一个函数

保证每个组件实例，维护独立的一份数据，每次创建一个组件都会创建一份新的数据对象，各个组件对自己那份数据的修改不会影响到其他组件。

50.组件通信

定义：组件与组件之间的数据传递

组件关系：

1.父子关系            ->组件通信（props和$emit）

2.非父子关系        ->组件通信（provide & inject   ,  eventbus）

此外，还有一个通用的解决方案：Vuex (适合复杂业务场景)

props

props其实就是给子组件标签添加一个属性，然后传值

父组件的数据传到子组件：

1.在给子组件添加一个属性:title

2.子组件接收，

props:['title']

3.渲染使用

我是子组件{{title}}

子传父，$emit 

子组件不能直接修改父组件传过来的数据，子组件要利用$emit通知父组件，由父组件进行修改更新

1.子组件写个按钮，注册点击事件（@click），点击触发changeFn方法,在methods里面添加changeFn方法逻辑

methods:{
  //通过$emit,向父组件发送消息通知
  changeFn(){
    this.$emit('changeTitle','这是传到父组件的参数')
  }
}

解释：

'changeTitle'是事件名称，'这是传到父组件的参数'是参数

2.父组件给子组件标签添加监听事件，名称就是事件名，触发handleChange方法，在methods里面添加handleChange方法逻辑

methods:{
  handleChange(newTitle){
    this.myTitle =newTitle
  }
}

这里的newTitle会获取到子组件发送的通知的参数：'这是传到父组件的参数'

51.props详解

props效验

将原来的数组形式（

props:['username','age','isSingle','car','hobby']

）

缓冲json对象形式（

props:{

校验的属性名：类型

}

）

完整版：

prop与data