TypeError: Cannot read property ‘$options‘ of undefined解决uniapp中子组件点击事件报错的问题

TypeError: Cannot read property ‘$options’ of undefined解决uniapp中子组件点击事件报错的问题

问题描述

在uniapp中创建一个子组件，创建完之后发现里面的点击事件会报TypeError: Cannot read property ‘$options’ of undefined，无论是点击事件还是向父组件传值都用不了，在网上也查不到原因，于是决定绕过这个问题，想到了如下几个方法。

问题解决

使用slot

如果只是需要在子组件里的一个元素添加事件，可以将这个元素用slot抽离出来，样式和内容在父组件中的slot定义，这样事件也能直接在父组件中定义，绕开了子组件定义事件报错的问题。

在父级组件中使用slot，并且在父级组件中绑定wubao事件

<view slot="botomButton">
				<view @click="wubao"  class="jiedan v-hv-center">
					<text >误报</text> 
				</view>
			</view>

在子组件中定义插槽名字

<slot name="botomButton"></slot>

使用多级组件

如果需要循环遍历元素之后添加点击事件，这时候用slot就不能满足需求，因为slot是在父组件中渲染的，并不能将子组件中特定的元素渲染出来，况且uniapp中对slot的支持很差，不支持slot传值以及只支持解构插槽。

所以想到使用多级组件的方法。

将二级组件需要v-for的元素剥离出来，放到三级组件里，这时候发现三级组件是可以绑定事件的，于是这个问题彻底解决。

在二级组件中引入三级组件

	<list-box :type="type"></list-box>
<script>
	import listBox from "../list-box/list-box.vue"
	export default {
		components:{
			listBox
		},
    }
</script>

在三级组件中绑定phoneCall点击事件

<u-icon @click="phoneCall(item.phoneNumber)" v-if="item.isShowNumber" style="float: right;" name="phone-fill" color="#378DF9"
				 size="35"></u-icon>

值的传递步骤就是：父组件的值传递给二级组件，二级组件的值通过props接受父组件的值，再把值传递给三级组件，三级组件通过props接受二级组件的值。