更新web-view示例

pages/component/web-view/web-view.uvue

 <template>
   <view class="uni-flex-item">
-		<web-view ref="web-view" class="uni-flex-item" :src="src" :webview-styles="webview_styles" @message="message"
+    <web-view id="web-view" class="uni-flex-item" :src="src" :webview-styles="webview_styles" @message="message"
       @error="error" @loading="loading" @loaded="loaded">
     </web-view>
     <view class="uni-padding-wrap uni-common-mt">
@@ -39,24 +39,28 @@
           progress: {
             color: '#FF3333'
           }
+        },
+        webviewContext: null as WebviewContext | null
       }
-			}
+    },
+    onReady() {
+      this.webviewContext = uni.createWebviewContext('web-view', this)
     },
     methods: {
       back() {
-				(this.$refs['web-view'] as IWebViewNode).back();
+        this.webviewContext?.back();
       },
       forward() {
-				(this.$refs['web-view'] as IWebViewNode).forward();
+        this.webviewContext?.forward();
       },
       reload() {
-				(this.$refs['web-view'] as IWebViewNode).reload();
+        this.webviewContext?.reload();
       },
       stop() {
-				(this.$refs['web-view'] as IWebViewNode).stop();
+        this.webviewContext?.stop();
       },
       nativeToWeb() {
-				(this.$refs['web-view'] as IWebViewNode).evalJS("alert('hello uni-app x')");
+        this.webviewContext?.evalJS("alert('hello uni-app x')");
       },
       message(event : WebViewMessageEvent) {
         console.log(JSON.stringify(event.detail));

[搬砖的码奴]

为什么开发工具中 @loading="loading" @loaded="loaded" 不触发呢