首先，页面这样下：
<template>
<view class="model-container">
<view v-if="isLoading" class="loading-container">
<text style="color: white;">加载中: {{ loadingProgress }}%</text>
<progress style="width: 110px;" border-radius="20" :percent="loadingProgress" color="#007AFF"></progress>
</view>
<view id="map" :modelUrl="modelUrl" :modelname="modelname" :change:modelname="renderjs.ModeladdName"
:change:modelUrl="renderjs.ModeladdUrl" :prop="isHide" :change:prop="renderjs.handleAction"
@click="callParentMethod">
<canvas id="webgl" type="webgl" class="model-canvas"></canvas>
</view>
</view>
</template>
<script>
export default {
name: 'threeModel',
props: {
modelUrl: {
type: [String],
default: ''
},
modelname: {
type: [String],
default: ''
},
height: {
type: [Number, String],
default: '300px'
},
parentMethod: {
type: Function,
required: true
}
},
data() {
return {
isHide: false,
isLoading: false,
loadingProgress: 0
}
},
methods: {
callParentMethod() {
this.parentMethod()
},
changeLoading(isLoading) {
this.isLoading = isLoading
},
changeProgress(loadingProgress) {
console.log(loadingProgress)
this.loadingProgress = loadingProgress
}
},
onHide() {
this.isHide = true
},
onUnload() {
this.isHide = true
}
}
</script>
<script module="renderjs" lang="renderjs">
export default {
data() {
return {
}
},
methods: {
},
created() {
}
}
</script>
<style>
</style>1、如果想在renderJS中调用 changeProgress 这个方法，这样写：
this.$ownerInstance.callMethod('changeProgress', Math.round(percentComplete))
2、如果需要在点击这个组件的时候，调用外面的方法：比如这样：
<ThreeModelViewer :parentMethod="showSeting" :modelname="modelname" :modelUrl="modelUrl"
style="width: 100vw; height: 280px; justify-content: center;display: flex;margin-top: 60px;" />这是使用这个组件，在这个组件中传递一个方法：showSeting这个方法，在组件内这样写：
<view id="map" @click="callParentMethod">还需要再组件的属性中，添加接收父类的函数属性：
props: {
parentMethod: {
type: Function,
required: true
}
},然后再方法中这样写：
methods: {
callParentMethod() {
this.parentMethod()
}
},这样就可以调用到父类的方法了
3、如果在组件内，想要调用renderJS中的方法，这样写：
:change:modelUrl="renderjs.ModeladdUrl"根据属性的变化，而调用对应的方法，即可
这就是整个使用了