vueコンポーネントと子・親間の通信の詳細例(2)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

vueコンポーネントと子・親間の通信の詳細例(2)

小云云

Dec 26, 2017 pm 01:20 PM

コンポーネント詳しい説明通信

Vue コンポーネントの親子通信の詳細な説明で学習を続けます。この記事では、主に Vue コンポーネント間の親子間の通信に関する情報を詳しく紹介します。興味のある方はぜひ参考にしてください。

2. コンポーネント間の通信 (子コンポーネントが親コンポーネントに値を渡す)

イベントを通じてデータ送信を完了します。

①イベントを通じて子コンポーネントから渡された値を受け取るメソッドを親コンポーネントに定義する

methods:{
　　recvMsg:function(msg){
　　//参数msg就是子组件通过事件出来的数据
　　}
}

②イベント処理関数をバインドする

イベントは通常カスタムイベントです

<child-component @myEvent="recvMsg"></child-component>

③子コンポーネントでイベントをトリガーするコンポーネント

　　　　　　事件名，值
this.$emit(&#39;myEvent&#39;,myPhone)
//触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数

概要:

Vue では、親コンポーネントと子コンポーネントの関係は、プロパティが下、イベントが上として要約できます。親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントはイベントを通じて親コンポーネントにメッセージを送信します。

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信子传父</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </p>
  <script>
    //通过事件的方式传递
    //  绑定 -- 触发
    Vue.component("parent-component",{
      data:function(){
        return {
          sonMsg:""
        }
      },
      methods:{
        //msg参数要拿子传递的值          
        recvMsg:function(msg){
          console.log("父组件接收到子组件的数据"+msg);
          this.sonMsg = msg;

        }
      },
      template:`
        <p>
          <h1 id="这是父组件">这是父组件</h1>
          <p>子组件传来的数据为：{{sonMsg}}</p>
          <hr/>
          <child-component @customEvent="recvMsg"></child-component>
        </p>
      `
    })
    Vue.component("child-component",{
      methods:{
        sendMsg:function(){
          //来触发绑定给子组件的自定义方法
          //this.$emit("customEvent");第一个参数触发
          //this.$emit("customEvent");第二个参数传值
          this.$emit("customEvent","哈哈哈哈");
        },
      },
      template:`
        <p>
          <h1 id="这是子组件">这是子组件</h1>
          <button @click="sendMsg">senToFather</button>
        </p>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

子コンポーネントに入力を入れ、ボタンをクリックすると、ユーザーが入力した内容が親コンポーネントに送信されます

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>子与父之间的通信</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </p>
  <script>
  //创建父组件
    Vue.component("parent-component",{
    //data属性
      data:function(){
        return{
          sonMsg:""
        }
      },
      methods:{
        recvMsg:function(msg){
          this.sonMsg = msg
        }
      },
      template:`
        <p>
          <h1 id="父组件">父组件</h1>
          <h4 id="子组件传递的数据-sonMsg">子组件传递的数据：{{sonMsg}}</h4>
          <child-component @customEvent="recvMsg"></child-component>
        </p>
      `
    })
    //创建子组件
    Vue.component("child-component",{
      data:function(){
        return {
          myInput:""
        }
      },
      methods:{
        sendMsg:function(){
          this.$emit("customEvent",this.myInput);
        }
      },
      template:`
        <p>
          <h1 id="子组件">子组件</h1>
          <input type="text" v-model="myInput"/>
          <button @click="sendMsg">发送</button>
        </p>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

関連推奨事項:

vueコンポーネントの親子の詳細な説明通信(1)

vueコンポーネントのv forコマンドの紹介とv-for使用時のアラーム問題の分析

vueコンポーネントでのiframe要素の使い方の例

以上がvueコンポーネントと子・親間の通信の詳細例(2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Vue与服务器端通信的刨析：如何处理断网情况Aug 10, 2023 am 10:55 AM

Vue与服务器端通信的探析：处理断网情况的策略引言：在现代Web开发中，Vue.js已成为一种广泛使用的前端框架。然而，由于网络环境的不稳定性，处理断网情况是一个需要我们考虑的重要问题。本文将分析如何在Vue中处理断网情况，并给出相应的代码示例。一、断网情况分析在网络状况较好的情况下，Vue可以通过Ajax请求或WebSocket与服务器进行通信。但是，

如何通过PHP与P2P协议实现点对点通信Jul 28, 2023 pm 10:13 PM

如何通过PHP与P2P协议实现点对点通信随着互联网的发展，点对点（peer-to-peer，简称P2P）通信逐渐成为一种重要的通信方式。与传统的客户端-服务器通信方式相比，P2P通信具有更好的稳定性和伸缩性。在本文中，我们将介绍如何使用PHP与P2P协议实现点对点通信，并提供相应的代码示例。首先，我们需要了解P2P通信的基本原理。P2P协议允许多台计算机直接

诺基亚计划以 1.85 亿欧元的价格出售其设备管理和服务管理平台业务Dec 21, 2023 am 08:07 AM

诺基亚今日宣布，将其设备管理和服务管理平台业务以1.85亿欧元的价格出售给Lumine集团，预计明年第一季度完成根据我们的调查发现，Lumine是一家通信和媒体软件公司，最近从ConstellationSoftware分拆出来。作为交易的一部分，预计会有大约500名诺基亚员工加入Lumine据公开资料显示，这些平台的业务主要是诺基亚通过之前两次收购Motive和mFormation形成的。Lumine称其有意恢复Motive品牌，并将其作为一个独立的业务部门Lumine表示，收购价格包括一笔高达

5G通信到来，但是5G体验真的完全超越4G吗？Jan 08, 2024 pm 10:30 PM

28日，2023上海世界移动通信大会（MWC2023上海）开幕，“5.5G”成为热门主题，华为副董事长、轮值董事长、CFO孟晚舟在大会上也发表了“拥抱5G变革”的主题演讲，她认为5.5G是5G网络演进的必然之路。“5.5G网络下行万兆、上行千兆、千亿联接、内生智能的网络特征已经明确，从5G到5.5G，将更好地匹配人联、物联、感知、高端制造等场景，孵化更多的商业新机会。”对用户来说，5.5G到底意味着什么？我们还不知道。当行业已在讨论5.5G时？早已普及的5G体验到底如何？5G体验争议：真的比4G

数据通信中的信道传输速率单位是bps，它表示什么Jan 18, 2021 pm 02:58 PM

数据通信中的信道传输速率单位是bps，它表示“位/秒”或“比特/秒”，即数据传输速率在数值上等于每秒钟传输构成数据代码的二进制比特数，也称“比特率”。比特率表示单位时间内传送比特的数目，用于衡量数字信息的传送速度；根据每帧图像存储时所占的比特数和传输比特率，可以计算数字图像信息传输的速度。

Vue组件通信：使用$destroy进行组件销毁通信Jul 09, 2023 pm 07:52 PM

Vue组件通信：使用$destroy进行组件销毁通信在Vue开发中，组件通信是非常重要的一个方面。Vue提供了多种方式来实现组件通信，比如props和emit、vuex等。本文将介绍另一种组件通信方式：使用$destroy进行组件销毁通信。在Vue中，每个组件都有一个生命周期，其中包含了一系列的生命周期钩子函数。组件的销毁也是其中之一，Vue提供了一个$de

如何使用Swoole实现WebSocket通信Nov 07, 2023 pm 12:56 PM

Swoole是一个高性能的PHP协程网络框架，支持异步IO、多进程、多线程、协程等特性。其中，Swoole提供的WebSocket组件可用于实现实时双向通信，是构建实时应用的理想选择。本文将介绍如何使用Swoole实现WebSocket通信，并提供具体的代码示例。一、环境准备在使用Swoole实现WebSocket通信前，需要确保已安装Swoole扩展。可通

串行通信和并行通信的区别是什么May 16, 2023 am 11:44 AM

串行通信和并行通信的区别：1、并行通信指的是并行通信端口，同时传送八路信号，一次并行传送完整的一个字节信息，串行通信指的是串行通信端口，在一个方向上只能传送一路信号，传送一个字节信息时，只能一位一位地依次传送；2、并行通信是在同一时刻发送多位数据，串行通信用一根线在不同的时刻发送8位数据；3、并行通信发送速度快，距离短资源占用多，串行通信发送速度慢，距离远资源占用少。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、