vue父子組件的通信

来源:https://www.cnblogs.com/DreamchaserHe/archive/2019/11/08/11766170.html

一、父組件向子組件傳遞數據 1、首先形成父子組件關係 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> ...


 

一、父組件向子組件傳遞數據

1、首先形成父子組件關係

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">

    </div>

    <template id="cpn">
        <div>
            <h2>{{cmovies}}</h2>
            <p>{{cmessage}}</p>
        </div>
    </template>
    <script>
        const cpn = {
            template: `#cpn`,
            data() {
                return {}
            },
            methods: {}
        }
        let vm = new Vue({
            el: '#app',
            data: () => ({
                message: '父組件的數據',
                movies: ['戰狼1', '流浪地球', '攀登者']
            }),
            components: {
                cpn
            }
        })
    </script>
</body>

</html>

2、在子組件中定義一個props,定義兩個變數 (messages) (moviess)

props: ['messages', 'moviess']

3、使用子組件時,用V-bind綁定兩個變數(messages) (moviess),並且把父組件中的數據(message)(movies)傳給這兩個變數。

<cpn :messages="message" :moviess="movies"></cpn>
<!-- 不支持駝峰命名法 大寫字母之間用 - 隔開 -->

****完整代碼*****

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <cpn :messages="message" :moviess="movies"></cpn>
        <!-- 不支持駝峰命名法 大寫字母之間用 - 隔開 -->
    </div>
    <!-- 父傳子 -->
    <!-- 
        1、建立父子關係
        2、在子組件中定義一個props,定義兩個變數 (messages) (moviess)
        3、使用子組件時,用V-bind綁定兩個變數,並且把父組件中的數據(message)(movies)傳給這兩個變數。
        
     -->
    <template id="cpn">
        <div>
            <h2>{{messages}}</h2>
            <ul>
                <li v-for="item in moviess">
                    {{item}}
                </li>
            </ul>
        </div>
    </template>
    <script>
        const cpn = {
            template: `#cpn`,
            // props: ['messages', 'moviess'],


            props: {
                // 1、類型限制
                // messages:Array,
                // moviess:String,

                // 提供一些預設值
                messages: {
                    type: String,
                    default: 'aaaa',
                    required: true
                },
                // 當使用組件的時候,沒有綁定props中定義的變數,就會顯示定義的預設值
                moviess: {
                    // 類型是對象或數組,預設值必需是一個函數。  
                    type: Array,
                    // default: []
                    default() {
                        return []
                    }
                }
            },
            data() {
                return {}
            },
            methods: {}

        }
        let vm = new Vue({
            el: '#app',
            data: () => ({
                message: '父組件的數據',
                movies: ['戰狼1', '流浪地球', '攀登者'],

            }),
            components: {
                cpn
            }
        })
    </script>
</body>

</html>

** props中補充寫法

props: {
                // 1、類型限制
                // messages:Array,
                // moviess:String,

                // 提供一些預設值
                messages: {
                    type: String,
                    default: 'aaaa',
                    required: true
                },
                // 當使用組件的時候,沒有綁定props中定義的變數,就會顯示定義的預設值
                moviess: {
                    // 類型是對象或數組,預設值必需是一個函數。  
                    type: Array,
                    // default: []
                    default() {
                        return []
                    }
                }
            }

 二、子組件向父組件傳數據

1、構成父子組件關係

 2、在子組件中自定義一個事件      作用:發射一個事件給父組件

<button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>

 

            methods: {
                btnclick: function (item) {
                    // 發射事件:自定義事件
                    this.$emit('itemclick', item)
                }
            }

3、在父組件的模板中使用子組件中定義的事件 @itemclick="cpnclick"   並且在父組件創建一個新的事件 cpnclick 

<cpn @itemclick="cpnclick"></cpn>
            methods: {
                cpnclick: function (item) {
                    console.log('cpnclick', item)
                }
            }

***完整代碼***

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 父組件模板 -->
<div id="app">
    <cpn @itemclick="cpnclick"></cpn>
</div>
<!-- 
    1、構成父子組件關係
    2、在子組件定義一個事件,作用是  發射一個事件給父組件。this.$emit('itemclick')
    3、在父組件的模板中使用子組件中定義的事件 @itemclick="cpnclick" ,並且在父組件創建一個新的事件 cpnclick ,
    這裡面可以寫傳給父組件數據的邏輯以及限制
 -->

<body>
    <!-- 子組件模板 -->
    <template id="cpn">
        <div>
            <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
        </div>
    </template>
    <script>
        // 子組件
        const cpn = {
            template: `#cpn`,
            data() {
                return {
                    categories: [
                        { id: 'aa', name: '熱門推薦' },
                        { id: 'bb', name: '手機數位' },
                        { id: 'cc', name: '智能家居' },
                        { id: 'dd', name: '美容美髮' }
                    ]
                }
            },
            methods: {
                btnclick: function (item) {
                    // 發射事件:自定義事件
                    this.$emit('itemclick', item)
                }
            }
        }
        // 父組件
        let vm = new Vue({
            el: '#app',
            data: () => ({}),
            components: {
                cpn
            },
            methods: {
                cpnclick: function (item) {
                    console.log('cpnclick', item)
                }
            }
        })
    </script>
</body>

</html>

 


您的分享是我們最大的動力!

更多相關文章
  • 前言 老闆的手機收到一個紅包,為什麼紅包沒居中? 如何讓一個子元素在父容器里 水平垂直居中 ?這個問題必考,在實戰開發中,也應用得非常多。 你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規範,經不起千錘百煉。換句話說:這些人也就面試的時候誇誇其談,但真的上戰場的時候,他們不敢這麼寫,也不知道怎 ...
  • <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>sakura</title> <style> body { padding:0; margin:0; overflow:hidden; height: 600px; ...
  • web前端開發 一個XML的簡單應用 代碼如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 3 <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> 4 <! > 5 <rect ...
  • 1 <template> 2 <div class="artcle"> 4 <el-form 5 label-width="100px" 6 :model="testForm"> 7 <el-form-item 8 v-for="(vtem, index) in testForm.version" ...
  • 眾所周知,JavaScript核心包含Data()構造函數,用來創建表示時間和日期的對象。 今天主要跟大家梳理一下,常用的時間、日期處理方法,方便大家使用和理解 格式化時間 老生常談,大概會這麼寫 1234567891011 var format = function (time) { var y ...
一周排行
  • 1. 運行效果 在 "使用GetAlphaMask和ContainerVisual製作長陰影(Long Shadow)" 這篇文章里我介紹了一個包含長陰影的番茄鐘,這個番茄鐘在狀態切換時用到了翻轉動畫,效果如上所示,還用到了彈簧動畫,可以看到翻轉後有點回彈。本來打算自己這個動畫效果寫的,但火火已經寫 ...
  • 接上一篇,es部署很簡單,很快就弄好了。 但是還是有很多不玩美。 比如說:主機是本地的IP或機器名,埠是固定的9200. 而且是只有一個節點,我要在一臺機器上部署多個節點呢。 經過一段時間的摸索,做起來也很簡單,但過程切實很痛苦。 具體做法是:你想部署多少個節點,你就重覆多少次上一步的做法。啟動就 ...
  • 在項目中,需要為所有的Button、TextBox設置一個預設的全局樣式,一個個的為多個控制項設置相同的樣式顯然是不明智的。在WPF中可以通過資源設置全局樣式,主要有倆種方法: 1.第一種就是先寫好按鈕的樣式,不寫Key,然後在App.xaml中引用。 <ResourceDictionary xmln ...
  • 說明:該篇隨筆的代碼內容並非出自本人,是在其他網站搜尋的,出處已經不記得了,本次隨筆只為記錄,目的幫助自己,幫助他人。 實現的原理也不做多的贅述,直接上代碼。 第一個類是需要用到的Windows API public class Win32Api { [StructLayout(LayoutKind ...
  • 前言 在ASP.Net Core2.X調用的CreateWebHostBuilder和3.X的主要區別在於WebHost的調用,CreateDefaultBuilder被Host替換,另一個區別是對ConfigureWebHostDefaults()的調用; 由於新的主機生成器是通用主機生成器,因此 ...
  • 對於開發人員來說,常常需要在不藉助任何Microsoft Office及其他第三方軟體的情況下,打開、創建、修改、轉換、列印、瀏覽(Word、Excel、PowerPoint和PDF等)文檔,以及將數據從數據源轉換為常用的文檔格式,甚至一些其他的文檔操作。 在這裡,小編調查了業內許多開發人員,為大家 ...
  • 這次的目標是實現通過標註Attribute實現緩存的功能,精簡代碼,減少緩存的代碼侵入業務代碼。 緩存內容即為Service查詢彙總的內容,不做其他高大上的功能,提升短時間多次查詢的響應速度,適當減輕資料庫壓力。 在做之前,也去看了EasyCaching的源碼,這次的想法也是源於這裡,AOP的方式讓 ...
  • 例如想獲取尾碼名為.txt的文件 第一種方法獲取到的是對應的文件路徑 第二種方法可以獲取到文件的一些詳細信息 類似於"*.txt" 要與路徑中的文件名匹配的搜索字元串。這個參數可以包含有效的文本路徑和通配符(*和?)的組合人物,但它不支持正則表達式。 我是參照此路徑編寫的博客,用於自己查詢快速 ht ...
  • 我們在開發中Json傳輸數據日益普遍,有很多關於Json字元串的序列化和反序列化的文章大多都告訴你怎麼用,但是卻不會告訴你用什麼更高效。因為有太多選擇,人們往往會陷入選擇難題。 相比.NET Framework有三種選擇而.net core下已經沒有JavaScriptSerializer,但是大家 ...
  • c#微信公眾號開發 基本設置 參考微信官方文檔 https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html 開發→基本配置 公眾號開發信息 註:1.記錄好開發者密碼,會在程式中驗證過程 ...
x