技術標籤：筆記vue小程式uni-app

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接受二級元件的值。