Vue框架解决网页高光乱飞问题

有木有试过这样的事儿呀？就简简单单瞅瞅商品网页，没留意不小心刷了一下，结果高亮部分直接跑到最上面来了，真挺神奇？

就是说，咱们那个头部分件有点糊涂了，导航里的“选中”功能搞得不对劲儿。开始默认是没选的(也就是checked=0)，当你点击导航后，对应的路径就让它变成选中的(checked=1)。接着再刷新页面看看， checked 的数值又变回0了，这里得多留意下哈。

咋搞的？用 Vue框架就成！啥道理，就是子页传个数据到父页，接下来父页再把这个数据又传回到头组件里去。要注意的是要用 prop 的方式！

记住咱们这个规矩属性只能向下传递，不可逆转。这样可以防止因为失误而改变父级，导致整个系统乱七八糟。

唔，顺便提醒下。只要父组件换了个样儿，立马轮到子组件里的所有 prop 都得重新更新！记住，子组件里千万别轻易改那些 prop，不然 Vue 就会发现然后警告你哒~

我告诉你两个调整属性值的方法，其实用的是第二种。

1.这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，
 最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
	props: ['initialCounter'],
		data: function () {
		 return {
		 counter: this.initialCounter
		 }
	}
2.这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
		props: ['size'],
			computed: {
			 normalizedSize: function () {
			 return this.size.trim().toLowerCase()
			 }
		}	

你明白这事儿咋回事儿了？父子传值跟prop都能搞定网页刷新的时候高光位置乱飞的问题，这样一来，用着舒服多了不是！希望我说的这些对你有帮助哈。要是还不清楚或者有啥想问的，就在评论里说呗!记得点个赞，把这个小技巧分享给你身边也需要的人！