子传父$emit

子组件$emit('updateFont',num)

<template>
 <button @click = "emit('updateForm',num)"></button>
 {{data}}
</template>
 
<script>
export default {
    props:['data'],
    data(){
        return{
            num:20
        }
    },
    
}
</script>

父组件

<template>
<div @updateForm="updateForm" :data="5"></div>
</template>
 
<script>
export default {
    data(){
        return{
            num1:20,
            num2:10
        }
    },
    methods(){
        updateForm($event){//点击子组件的按钮，会监听到子组件的$emit发送的事件，父组件会进行响应
            console.log($event)
        }
    }
}
</script>

子组件向父组件传值

方法：子组件通过vue实例方法$emit进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理。

//子组件
<template>
  <ul class="letter_city">
    <li @click="selectItem('子组件向父组件传值')">
    </li>
   </ul>
</template>
<script>
export default {
   methods: {
    selectItem(value) {
      this.$emit('selectItems', value)
    }
  }
}
</script>

 上面代码中，this指代的是vue实例，子组件通过$emit向父组件触发事件和传递参数。

//父组件
<template>
  <city-pages @selectItem='selectItem'></city-pages>
</template>
<script>
import cityPages from './cityPages'
export default {
  components: {
    cityPages
  },
  methods: {
    selectItem(value) {
      console.log(value) // 子组件向父组件传值
    }
  }
}
</script>

ref属性

1.被用来给元素或子组件注册引用信息（id的替代者）

2.应用在html标签上获取的是真实DOM元素，

应用在组件标签上是组件实例对象（vc）

3.使用方式：

打标识：<h1 ref = 'xxx'>...</h1>或<school ref='xxx'><school>

获取：this.$refs.xxx

作用: 得到组件间的实例对象 ===> 组件间通信

webStorage(浏览器本地存储)

1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)

2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。

3.相关API:

    1）xxxxStorage.setItem('key','value');

            该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2）xxxxStorage.getItem('person');

            该方法接收一个键名作为参数，并把该键名从存储中删除。

    3）xxxxStorage.removeItem('key');

            该方法接收一个键名作为参数，返回键名对应的值。

    4）xxxxStorage.clear()

            该方法会清空存储中的所有数据。

4.备注:

    1）SessionStorage存储的内容会随着浏览器窗口关闭而消失。

    2）LocalStorage存储的内容，需要动手清除才会消失。

    3）xxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。

    4）JSON.parse(null)的结果依然是null