精华内容
下载资源
问答
  • SystemVue 通信系统设计。官方SystemVue 中文教程,非常详实讲解。
  • vue通信方式有很多,项目中用的比较多的的有 pros、vuex、$emit/$on 这3种,还有 provide/inject (适合高阶组件)、 $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref、eventBus 等这3种方式。...
  • flutter webview 与 前端vue通信

    千次阅读 2020-05-28 21:18:38
    加载vue项目 第一步,通过webview 加载vue项目,项目里包含图片、字体,js,css文件,首先要启动一个localserver(本地服务) 第二步,通过localserver去加载vue打包后的dist文件 结合 flutter_webview_plugin 插件...

    flutter有3个比较好的webview插件

    • 1. webview_flutter : 官方维护的 WebView 插件,特性基于原生和 Flutter SDK 封装,继承 StatefulWidget,因此支持内嵌于 flutter Widget 树中.
      适用于:单个静态文件,远程webdi地址。缺点:不支持本地服务,不支持加载一个完整本地的html项目,比如vue项目。

    • 2. flutter_webview_plugin : flutter社区进行维护,易用程度目前高于webview_flutter 。特性是基于原生 WebView 封装的 Flutter 插件,将原生的一些基本使用 API 封装好提供给 Flutter 调用,因此并不能内嵌于 Flutter Widget 树中。
      在界面的跳转时必须得先释放掉,返回后又要重新初始化。
      适用于:支持本地服务,加载一个完整本地的html项目,比如vue项目。

    • 3. flutter_inappwebview : 个人开发者维护。基于原生和 Flutter SDK 封装,优点是内置了一个本地服务,缺点,更新太慢,bug修复很慢。

    加载vue项目

    1. 第一步,通过webview 加载vue项目,项目里包含图片、字体,js,css文件,首先要启动一个localserver(本地服务)
    2. 第二步,通过localserver去加载vue打包后的dist文件

    结合 flutter_webview_plugin 插件最佳

      mounted() {
        /// 给flutter app调用。vue的方法不会暴露给app使用 需要把方法名暴露给window
        window.forFlutterInit = this.forFlutterInit;
        window.forFlutterRender = this.forFlutterRender;
      },
      methods: {
    	forFlutterInit(){
        	console.log("想做什么都行");
        },
        forFlutterRender(){
        	console.log("第二个方法,想做什么都行");
        },
      }
    

    1. webview_flutter用法

    # pubspec.yaml
    ...
    webview_flutter: 0.3.22+1
    ...
    
     
    class TestWebView extends StatefulWidget {
      final props;
      TestWebView({
        this.props,
      });
    
      @override
      _TestWebViewState createState() => _TestWebViewState();
    }
    
    class _TestWebViewState extends State<TestWebView> {
      WebViewController _controller;
    
      _loadHtmlFromAssets() async {
        String fileText = await rootBundle.loadString('assets/webview/index_test.html');
        await _controller
            .loadUrl(Uri.dataFromString(fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
      }
    
      JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
        return JavascriptChannel(
          name: 'Toaster',
          onMessageReceived: (JavascriptMessage message) {
            Scaffold.of(context).showSnackBar(
              SnackBar(content: Text(message.message)),
            );
          },
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return SizedBox(
          width: MediaQuery.of(context).size.width,
          // height: 500, // 去掉高度尝试
          child: WebView(
            initialUrl: 'https://www.ifredom.com',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              // _controller.complete(webViewController);
              _controller = webViewController;
              _loadHtmlFromAssets();
            },
            javascriptChannels: <JavascriptChannel>[
              _toasterJavascriptChannel(context),
            ].toSet(),
            navigationDelegate: (NavigationRequest request) {
              // 拦截请求
              if (request.url.contains('youtube')) {
                print('重新开一个 webview to $request}');
                Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
                  return TestWebView();
                }));
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            },
            onPageStarted: (String url) {
              print('Page 开始 loading: $url');
            },
            onPageFinished: (String url) {
              print('Page 结束 loading: $url');
      		  // flutter 调用js方法
      		  String script = "forFlutterInit('flutter传入的值')";
              _controller.evaluateJavascript(script).then((result) {
                print(result);
                setState(() {
                  // ...
                });
              });
            },
            gestureNavigationEnabled: true,
          ),
        );
      }
    }
    
    

    test.html 用于测试,需要提前在pubspec.yaml中添加

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset=utf-8>
      <meta http-equiv=X-UA-Compatible content="IE=edge">
      <meta name=viewport content="width=device-width,initial-scale=1">
      <link rel=icon href=favicon.ico>
      <title>测试</title>
    </head>
    
    <body>
      html内容页面
      <button onclick="callFlutter()">点击</button>
      <div id="p1">Flutter 调用了 JS.</div>
    
      <script>
        function forFlutterInit(message) {
        	// html页面获取flutter 传入参数
          document.getElementById("p1").innerHTML = message;
        }
        function callFlutter() {
        	// html页面调用flutter 方法
          Toaster.postMessage("html页面 调用Flutter方法");
        }
      </script>
    </body>
    
    </html>
    

    2. flutter_webview_plugin用法

    # pubspec.yaml
    ...
    flutter_webview_plugin: 0.3.11
    ...
    

    第一步. localserver.dart 用于启动本地服务,在文尾。

    
    class MusicScoreWebView extends StatefulWidget {
      @override
      _MusicScoreWebViewState createState() => _MusicScoreWebViewState();
    }
    
    class _MusicScoreWebViewState extends State<MusicScoreWebView> {
      final flutterWebViewPlugin = FlutterWebviewPlugin();
      CopyInAppLocalhostServer localhostServer = locator<CopyInAppLocalhostServer>();
      double _viewProgress = 0;
      String _url  = "";
      
      
      Future _initLocalServe() async {
        print("启动 server/webview 服务");
        await localhostServer.start();
        await addListenerWebview(); // 如果不需要中途更改html内容,可比不添加此监听方法。监听WebView的加载事件
      }
      
      Future _dispose() async {
        flutterWebViewPlugin.dispose();  //必须关闭
        await localhostServer.close();
        print("关闭 server/webview 服务");
      }
      
      Future<void> addListenerWebview({String name}) async {
        double _viewProgress = 0;
        
        flutterWebViewPlugin.onProgressChanged.listen((viewProgress) async {
          print("加载进度 $viewProgress");
          _viewProgress = viewProgress;
        });
        
        flutterWebViewPlugin.onStateChanged.listen((viewState) async {
          print("状态改变了: ${viewState.type}");
    
          if (viewState.type == WebViewState.finishLoad) {
            print("onStateChanged 页面加载完成");
    
            if (_viewProgress == 1.0) {
              String _testData = "123456"; 
              String _initScript = "forFlutterInit('$_testData')";
              await flutterWebViewPlugin.evalJavascript(_initScript).then((result) async {
                print('调用 forFlutterInit 方法返回值: $result');
              });
            }
          }
        });
      }
     
      @override
      void initState() {
        super.initState();
        _initLocalServe();
      }
      
      @override
      void dispose() {
        _dispose()
        super.dispose();
      }
      
      
      @override
      Widget build(BuildContext context) {
        final Set<JavascriptChannel> jsChannels = [
          JavascriptChannel(
            name: 'FlutterToast',
            onMessageReceived: (JavascriptMessage message) {
              showToast(message.message);
            },
          ),
        ].toSet();
    
        return SizedBox(
          width: MediaQuery.of(context).size.width,
          // height: 500, // 去掉高度尝试
          child: WebviewScaffold(
            url: "http://localhost:8085/assets/index.html",
            javascriptChannels: jsChannels,
            mediaPlaybackRequiresUserGesture: false,
            // appBar: AppBar(
            //   title: const Text('Widget WebView'),
            // ),
            withZoom: true,
            withLocalStorage: true,
            hidden: true,
            initialChild: Container(
              child: const Center(child: Text('正在加载中.....')),
            ),
            key: Key("webview"),
            debuggingEnabled: true,
          ),
        );
      }
      }
    

    3. flutter_inappwebview用法

    此插件参数过多,并且需要配置andorid, 更多参数使用方法,详见官方文档

    # pubspec.yaml
    ...
    flutter_inappwebview 4.0.0+4
    ...
    
      InAppLocalhostServer localhostServer = new InAppLocalhostServer();
      
      Widget _buildWebviewScaffold() {
         return InAppWebView(
                 initialUrl: "http://localhost:8080/assets/index.html",
                 initialHeaders: {},
                 initialOptions: InAppWebViewGroupOptions(
                     inAppWebViewOptions: InAppWebViewOptions(
                       debuggingEnabled: true,
                     )
                 ),
                 onWebViewCreated: (InAppWebViewController controller) {
    				print("做点什么");
                 },
                 onLoadStart: (InAppWebViewController controller, String url) {
    				print("做点什么");
                 },
                 onLoadStop: (InAppWebViewController controller, String url) {
    				print("做点什么");
                 },
          );
       }
    

    其他。启动本地服务

    CopyInAppLocalhostServer.start();

    CopyInAppLocalhostServer.close();

    // localserver.dart
    import 'dart:async';
    import 'dart:io';
    
    import 'package:flutter/services.dart' show rootBundle;
    import 'package:mime/mime.dart';
    
    class CopyInAppLocalhostServer {
      // final _log = Logger("CopyInAppLocalhostServer");
      HttpServer _server;
      int _port = 8080;
    
      CopyInAppLocalhostServer({int port = 8080}) {
        this._port = port;
      }
      Future<void> start() async {
        if (this._server != null) {
          throw Exception('Server already started on http://localhost:$_port');
        }
    
        var completer = Completer();
    
        runZoned(() {
          HttpServer.bind('127.0.0.1', _port).then((server) {
            print('本地服务 http://localhost:' + _port.toString());
    
            this._server = server;
            server.listen((HttpRequest request) async {
              var body = List<int>();
              var path = request.requestedUri.path;
              path = (path.startsWith('/')) ? path.substring(1) : path;
              path += (path.endsWith('/')) ? 'index.html' : '';
    
              try {
                body = (await rootBundle.load(path)).buffer.asUint8List();
              } catch (e) {
                print(e.toString());
                await request.response.close();
                return;
              }
    
              var contentType = ['text', 'html'];
              if (!request.requestedUri.path.endsWith('/') && request.requestedUri.pathSegments.isNotEmpty) {
                var mimeType = lookupMimeType(request.requestedUri.path, headerBytes: body);
                if (mimeType != null) {
                  contentType = mimeType.split('/');
                }
              }
    
              request.response.headers.contentType = ContentType(contentType[0], contentType[1], charset: 'utf-8');
              request.response.add(body);
              await request.response.close();
            });
    
            completer.complete();
          });
        }, onError: (e, stackTrace) => print('Error: $e $stackTrace'));
        return completer.future;
      }
    
      ///Closes the server.
      Future<void> close() async {
        if (this._server != null) {
          await this._server.close(force: true);
          print('本地服务 on http://localhost:$_port closed');
          this._server = null;
        }
      }
    }
    
    

    如果文章对你有用,感谢右上角 >>>点赞 | 收藏 <<<

    展开全文
  • vue通信、传值的多种方式(详细)

    万次阅读 多人点赞 2018-02-08 18:29:45
    Vue通信、传值的多种方式,详解(都是干货): 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等) this.$router.push({ path: '/...

    Vue通信、传值的多种方式,详解(都是干货):

    一、通过路由带参数进行传值

    ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)

    this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

    ②在B组件中获取A组件传递过来的参数

    this.$route.query.orderId

    二、通过设置 Session Storage缓存的形式进行传递

    ①两个组件A和B,在A组件中设置缓存orderData

    const orderData = { 'orderId': 123, 'price': 88 }
    
    sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

    ②B组件就可以获取在A中设置的缓存了

    const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))

    此时 dataB 就是数据 orderData

    朋友们可以百度下 Session Storage(程序退出销毁) 和 Local Storage(长期保存) 的区别。

    三、父子组件之间的传值

    (一)父组件往子组件传值props

    ①定义父组件,父组件传递 number这个数值给子组件,如果传递的参数很多,推荐使用json数组{}的形式

    ②定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会报错。

    当然也可以简单一点,如果不考虑数据类型,直接 props:["number","string"]就可以了,中括号包裹,多个值使用,分隔。

    ③假如接收的参数 是动态的,比如 input输入的内容 v-model的形式

    注意:传递的参数名称 支持驼峰命名,下图 描述不正确(1.0是不支持的)

    ④父子组件传值,数据是异步请求,有可能数据渲染时报错

    原因:异步请求时,数据还没有获取到但是此时已经渲染节点了

    解决方案:可以在 父组件需要传递数据的节点加上  v-if = false,异步请求获取数据后,v-if = true

    (二)、子组件往父组件传值,通过emit事件

    四、不同组件之间传值,通过eventBus(小项目少页面用eventBus,大项目多页面使用 vuex)

    ①定义一个新的vue实例专门用于传递数据,并导出

    ②定义传递的方法名和传输内容,点击事件或钩子函数触发eventBus.emit事件

    ③接收传递过来的数据

    注意:enentBus是一个另一个新的Vue实例,区分两个this所代表得vue实例

    五、vuex进行传值

    为什么使用vuex?

    vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手。

    需求:两个组件A和B,vuex维护的公共数据是 餐馆的名称 resturantName,默认餐馆名称是 飞歌餐馆,那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称 为 A餐馆,则B页面显示的将会是 A餐馆,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。

             

    ①使用 vue-cli脚手架工具创建一个工程项目,工程目录,创建组件A和组件B路由如下:

    路由如下:

    import Vue from 'vue'
    import Router from 'vue-router'
    import componentsA from '@/components/componentsA'
    import componentsB from '@/components/componentsB'
    
    Vue.use(Router)
    
    export default new Router({
       mode: 'history',
        routes: [
            {
            path: '/',
            name: 'componentsA',
            component: componentsA
            },
            {
                path: '/componentsA',
                name: 'componentsA',
                component: componentsA
            },
            {
                path: '/componentsB',
                name: 'componentsB',
                component: componentsB
            }
        ]
    })

    app.vue

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

    ②开始使用vuex,新建一个 sotre文件夹,分开维护 actions mutations getters

    ②在store/index.js文件中新建vuex 的store实例

    *as的意思是 导入这个文件里面的所有内容,就不用一个个实例来导入了。

    import Vue from 'vue'
    import Vuex from 'vuex'
    import * as getters from './getters' // 导入响应的模块,*相当于引入了这个组件下所有导出的事例
    import * as actions from './actions'
    import * as mutations from './mutations'
    
    Vue.use(Vuex)
    // 首先声明一个需要全局维护的状态 state,比如 我这里举例的resturantName
    const state = {
        resturantName: '飞歌餐馆' // 默认值
        // id: xxx  如果还有全局状态也可以在这里添加
        // name:xxx
    }
    
    // 注册上面引入的各大模块
    const store = new Vuex.Store({
        state,    // 共同维护的一个状态,state里面可以是很多个全局状态
        getters,  // 获取数据并渲染
        actions,  // 数据的异步操作
        mutations  // 处理数据的唯一途径,state的改变或赋值只能在这里
    })
    
    export default store  // 导出store并在 main.js中引用注册。

    ③actions

    // 给action注册事件处理函数。当这个函数被触发时候,将状态提交到mutations中处理
    export function modifyAName({commit}, name) { // commit 提交;name即为点击后传递过来的参数,此时是 'A餐馆'
        return commit ('modifyAName', name)
    }
    export function modifyBName({commit}, name) {
        return commit ('modifyBName', name)
    }
    
    // ES6精简写法
    // export const modifyAName = ({commit},name) => commit('modifyAName', name)

    ④mutations

    // 提交 mutations是更改Vuex状态的唯一合法方法
    export const modifyAName = (state, name) => { // A组件点击更改餐馆名称为 A餐馆
        state.resturantName = name // 把方法传递过来的参数,赋值给state中的resturantName
    }
    export const modifyBName = (state, name) => { // B组件点击更改餐馆名称为 B餐馆
        state.resturantName = name
    }

    ⑤getters

    // 获取最终的状态信息
    export const resturantName = state => state.resturantName

    ⑥在main.js中导入 store实例

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,  // 这样就能全局使用vuex了
      components: { App },
      template: '<App/>'
    })

    ④在组件A中,定义点击事件,点击 修改 餐馆的名称,并把餐馆的名称在事件中用参数进行传递。

    ...mapactions 和 ...mapgetters都是vuex提供的语法糖,在底层已经封装好了,拿来就能用,简化了很多操作。

    其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn',{参数}),mapActions中只需要指定方法名即可,参数省略。

    ...mapGetters(['resturantName'])相当于this.$store.getters.resturantName

    <template>
      <div class="componentsA">
          <P class="title">组件A</P>
          <P class="titleName">餐馆名称:{{resturantName}}</P>
          <div>
                <!-- 点击修改 为 A 餐馆 -->
              <button class="btn" @click="modifyAName('A餐馆')">修改为A餐馆</button>
          </div>
          <div class="marTop">
              <button class="btn" @click="trunToB">跳转到B页面</button>
          </div>
      </div>
    </template>
    
    <script>
    import {mapActions, mapGetters} from 'vuex'
    export default {
      name: 'A',
      data () {
        return {
        }
      },
      methods:{
          ...mapActions( // 语法糖
              ['modifyAName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
          ),
          trunToB () {
              this.$router.push({path: '/componentsB'}) // 路由跳转到B
          }
      },
      computed: {
          ...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
        .title,.titleName{
            color: blue;
            font-size: 20px;
        }
        .btn{
            width: 160px;
            height: 40px;
            background-color: blue;
            border: none;
            outline: none;
            color: #ffffff;
            border-radius: 4px;
        }
        .marTop{
            margin-top: 20px;
        }
    </style>

        B组件同理

    <template>
      <div class="componentsB">
          <P class="title">组件B</P>
          <P class="titleName">餐馆名称:{{resturantName}}</P>
          <div>
              <!-- 点击修改 为 B 餐馆 -->
              <button class="btn" @click="modifyBName('B餐馆')">修改为B餐馆</button>
          </div>
          <div class="marTop">
              <button class="btn" @click="trunToA">跳转到A页面</button>
          </div>
      </div>
    </template>
    
    <script>
    import {mapActions, mapGetters} from 'vuex'
    export default {
      name: 'B',
      data () {
        return {
        }
      },
      methods:{
          ...mapActions( // 语法糖
              ['modifyBName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
          ),
          trunToA () {
              this.$router.push({path: '/componentsA'}) // 路由跳转到A
          }
      },
      computed: {
          ...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
        .title,.titleName{
            color: red;
            font-size: 20px;
        }
        .btn{
            width: 160px;
            height: 40px;
            background-color: red;
            border: none;
            outline: none;
            color: #ffffff;
            border-radius: 4px;
        }
        .marTop{
            margin-top: 20px;
        }
    </style>

    最后:本文完全手打,如需转载请注明出处,谢谢,如果不明白的地方欢迎给我留言哦。

    github项目仓库地址:https://github.com/byla678/vuexdemo.git

    卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云

    展开全文
  • Vue.component('child-component',{ template:'<div><slot>如果父组件没有插入内容,我将作为默认出现</slot></div>' }); new Vue({ el:'#app', data:{ } });  子组件...

          了解插槽slot之前,我们先说一下作用域。父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。因此slot分发的内容,作用域是在父组件上

    1、单个slot

    在子组件内使用特殊的<slot>元素就可以作为这个子组件开启一个slot插槽,在父组件模板里,插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。

    	<div id="app">
    			<child-component">
    				<p>分发的内容</p>
    			</child-component>
    		</div>
    		<script>
    			Vue.component('child-component',{
    				template:'<div><slot>如果父组件没有插入内容,我将作为默认出现</slot></div>'
    				
    			});
    			new Vue({
    				el:'#app',
    				data:{					
    				}
    			});
    		</script>

          子组件child-component 的模板内定义了一个<slot>元素,并且用一个<p>作为默认的内容,在父组件没有使用slot 时,会渲染这段默认的文本;如果写入了slot, 那就会替换整个<slot> 。所以上例渲染后的结果为:

    <div id=”app”>
    <div>
    <p>分发的内容</p>
    </div>
    </div>

    【注意】子组件<slot>的备用内容,它的作用域是子组件本身。

    2、具名slot

    <slot> 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:

    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>

    在向具名插槽提供内容的时候,我们可以在一个父组件的 <template> 元素上使用slot 特性:

    <base-layout>
      <template slot="header">
        <h1>Here might be a page title</h1>
      </template>
    
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    
      <template slot="footer">
        <p>Here's some contact info</p>
      </template>
    </base-layout>

     

    展开全文
  • 本文介绍如何用SystemVue 2018仿真一个AM系统。

    AM仿真实验

    利用SystemVue搭建了一个AM通信系统的仿真,需要该项目文件的请到文末连接自取。

    实验原理:

    调幅是使载波的振幅按照所需传送信号的变化规律而变化,但频率保持不变的调制方法。
    将调制信号与直流相加,再与载波信号相乘,即可实现普通调幅。如下图所示:
    在这里插入图片描述
    其解调方法包括两种:
    ①包络检波
    利用普通调幅信号的包络反映调制信号波形变化这一特点,如能包络提取出来,就可以恢复原来的调制信号,本仿真采用包络检波方法。
    ②同步检波
    同步检波必须采用一个与发射端载波同频率同相的信号,这个信号称为同步信号。
    注意:双边带调幅、单边带调幅和残留边带调幅只能采用同步检波。

    实验目的:

    理解AM调制与解调的数学原理;
    掌握AM调制与解调的实现方法。

    仿真内容:

    利用SystemVue建立AM仿真系统,研究AM调制信号的产生和解调的方法,并改变直流信号大小进行AM信号过调制的测试。

    仿真环境:

    SystemVue2018

    模块介绍:

    在这里插入图片描述

    实验结果:

    1.给出搭建好的仿真系统框图
    在这里插入图片描述
    2.产生AM调制信号与解调后的信号
    AM调制信号
    解调后的信号
    3.观察源信号频谱与已调信号频谱
    在这里插入图片描述
    4.对直流信号幅度进行改变,对比解调结果

    将直流信号幅度设置为0.3后,AM调制信号与解调后的信号如下图所示,可以看到直流信号幅度较低时会出现过调制现象,包络检波不能正确解调出信号:
    在这里插入图片描述
    在这里插入图片描述
    该仿真项目的SystemVue文件已发布在公众号“工科南”,感兴趣的同学请扫码关注公众号“工科南”并回复“02”获取该项目文件。
    在这里插入图片描述

    展开全文
  • http://www.weekreport.cn/archives/119 更多SystemVue仿真实验请移步 SystemVue通信系统仿真(一):AM系统仿真 1.实验原理: ASK即“幅移键控”又称为“振幅键控”,也称为“开关键控”(通断键控),所以又记作...
  • 路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段。 例子:创建并在路由注册一个组件Head <button @click=handleChange>clickMe</button> //给按钮绑定点击事件 [removed] ...
  • nvue和vue通信的问题

    2020-07-08 11:46:58
    一.过期的版本 1.消息发送页 index.nvue: export default { methods:{ postMessage(num){ console.log("准备发送"+num) ...2.在App.vue里使用onUniNViewMessage进行监听 export default { onUniNVi...
  • vue的8种通信方式

    千次阅读 2020-06-10 18:07:07
    父组件通过 props 的方式向子组件传递数据,而通过 emit() 子组件可以向父组件通信。 父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据: 在子组件article.vue中如何获取父组件 section.vue 中...
  • vue通信一(sockjs实现webSocket通信)

    千次阅读 2020-10-13 15:31:34
    //连接SockJS的endpoint名称为"bullet" 使用方法: 导入模块 import SockJS from 'sockjs-client' import Stomp from 'stompjs' 根据状态判断是否开始通信 var url if (location.hostname === '192.168.10.143' || ...
  • 主要为大家详细介绍了vue组件父子间通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue - vue和iframe之间通信传值

    千次阅读 2020-12-19 23:38:19
    vue中使用iframe标签,实现vue和iframe中通信 vue与iframe通信 // vue <template lang="pug"> .map-content iframe#mapIframe(:src="mapIframeUrl" ref="mapFrame" frameborder="no" border="0" margin...
  • 在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现...App.vue 文件 <mask hide-mask.sync=hideMask></mask> <dialog hide-dialog.sync=hideDialog hide-mask.sync=hideMask></dialog> <dialog-
  • 主要介绍了vue2.0组件之间传值、通信的多种方式以及注意要点,需要的朋友可以参考下
  • vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子...
  • 在做vue项目中,组件之间的通信是必不可少的,但是vue有多少种方式、用法、优缺点及适用场景,本篇文章大概总结一下。(本篇摘抄[Vue组件通信方式及其应用场景总结](https://juejin.cn/post/6903796293445877773)并...
  • desktop-v2 - 用于上传和编辑剧集的 Vue.js 驱动的 Studio 环境 processor-v2 - 基于 Python 的播客音频制作 api-v2 - Studio 环境连接到的 API deployment - 这包含系统通用的基础设施,包括 RabbitMQ 和 ...
  • 实现Vue和Flask通信

    千次阅读 2021-05-18 17:33:27
    title: 实现Vue和Flask通信 categories: Python JavaScript tags: Python JavaScript Vue Flask 实现Vue和Flask通信 安装axios和实现通信 这里我们通过axios来连接Vue前端和Flask后端,使用AJAX请求进行通信。...
  • 主要介绍了vue子父组件通信的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文实例讲述了vue组件通信传值操作。分享给大家供大家参考,具体如下: 父子组件通信: 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
  • 微前端qiankun Vue应用间通信的思考

    千次阅读 2021-04-24 16:27:33
    之所以会有这个思考,是因为看了一篇文章 基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇 ,其中有介绍使用 Shared 通信,精辟之处在于 // micro-app-vue/src/main.js //... /** * 渲染函数 * 主应用...
  • vue组件通信的几种方式

    千次阅读 2020-08-26 21:01:20
    vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,...
  • vue通信及组件之间传值

    万次阅读 多人点赞 2019-03-08 10:07:44
    原文链接:(https://github.com/Xweihaifeng/vue-props) ... 常用vue通信大概有这几种方式进行: 组件间的父子之间的传值 组件间的子父之间的传值 非组件间的组件间的传值(简称:EventBus) sessionStora...
  • 项目中有个地图是通过iframe嵌入vue项目中的,vue组件和iframe之间的通信就需要通过window.parent和contentwindow. 1、iframe向vue组件传递数据 在iframe中请求了数据,需要传递给vue组件 // iframe中请求数据 ...
  • 【1】vue-resource Vue的一个插件,非官方库,多用于Vue1.X。详细介绍点击查看在线文档 下载vue-resource npm install vue-resource --save 引入vue-resource // 引入模块 import VueResource from 'vue-resource'...
  • 本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,044
精华内容 20,017
关键字:

vue通信

vue 订阅