vue父子传参及props修改

vue父子传参及props修改

在项目开发中遇到父子传值，需要操作传值的问题
在父组件中传入

<v-sidebar :items="items" ></v-sidebar>
data() { 
	items: [
		{
			name: '靓仔'
		}
	]
}

子组件中接收

props:{
   items:{
     default:()=>{return []}
   }
 },

正常情况下使用

<div v-for="item in items">
	<span @click="itemClick">{{item.name}}</span>
</div>
<script>
	methods: {
		itemClicck(item) {
			...
		}
	}
</script>

项目的实际操作是在进入当前页面时需要选中第一个。
但是items的值并不是固定的，而是动态获取的。
这种情况下，在created和mounted等生命周期中获取的都时默认值。
经过查阅文档，解决方案是使用watch处理

watch: {
  items: function(newVal, oldVal) {
    newVal && this.itemClick(newVal[0])
  }
}

这篇文章比较基础， 记录问题不是目的， 主要是想给各位大佬助助兴。