vue-父子組件和ref

来源:https://www.cnblogs.com/ygjzs/archive/2019/11/09/11828206.html
-Advertisement-
Play Games

父組件向子組件傳值 父組件向子組件傳方法 vue+本地存儲實現評論功能 難道在於理解父組件向子組件傳方法 ref獲取DOM和組件 vue中如何操作DOM ...


父組件向子組件傳值

 <div id="app">
    <!-- 父組件,可以在引用子組件的時候, 通過 屬性綁定(v-bind:) 的形式, 把 需要傳遞給 子組件的數據,以屬性綁定的形式,傳遞到子組件內部,供子組件使用 -->
    <com1 v-bind:parentmsg="msg"></com1>
  </div>
// 創建 Vue 實例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123 啊-父組件中的數據'
      },
      methods: {},

      components: {
        // 結論:經過演示,發現,子組件中,預設無法訪問到 父組件中的 data 上的數據 和 methods 中的方法
        com1: {
          data() { // 註意: 子組件中的 data 數據,並不是通過 父組件傳遞過來的,而是子組件自身私有的,比如: 子組件通過 Ajax ,請求回來的數據,都可以放到 data 身上;
            // data 上的數據,都是可讀可寫的;
            return {
              title: '123',
              content: 'qqq'
            }
          },
          template: '<h1 @click="change">這是子組件 --- {{ parentmsg }}</h1>',
          // 註意: 組件中的 所有 props 中的數據,都是通過 父組件傳遞給子組件的
          // props 中的數據,都是只讀的,無法重新賦值
          props: ['parentmsg'], // 把父組件傳遞過來的 parentmsg 屬性,先在 props 數組中,定義一下,這樣,才能使用這個數據,只讀,寫的話會報警告
          directives: {},
          filters: {},
          components: {},
          methods: {
            change() {
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });

父組件向子組件傳方法

<div id="app">
    <!-- 父組件向子組件 傳遞 方法,使用的是 事件綁定機制; v-on, 當我們自定義了 一個 事件屬性之後,那麼,子組件就能夠,通過某些方式,來調用 傳遞進去的 這個 方法了 -->
    <com2 @func="show"></com2>
  </div>

  <template id="tmpl">
    <div>
      <h1>這是 子組件</h1>
      <input type="button" value="這是子組件中的按鈕 - 點擊它,觸發 父組件傳遞過來的 func 方法" @click="myclick">
    </div>
  </template>
 // 定義了一個字面量類型的 組件模板對象
    var com2 = {
      template: '#tmpl', // 通過指定了一個 Id, 表示 說,要去載入 這個指定Id的 template 元素中的內容,當作 組件的HTML結構
      data() {
        return {
          sonmsg: { name: '小頭兒子', age: 6 }
        }
      },
      methods: {
        myclick() {
          // 當點擊子組件的按鈕的時候,如何 拿到 父組件傳遞過來的 func 方法,並調用這個方法???
          //  emit 英文原意: 是觸發,調用、發射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 創建 Vue 實例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          // console.log('調用了父組件身上的 show 方法: --- ' + data)
          console.log(data);
          this.datamsgFormSon = data
        }
      },

      components: {
        com2
        // com2: com2
      }
    });

vue+本地存儲實現評論功能

難道在於理解父組件向子組件傳方法

<div id="app">


    <cmt-box @func="loadComments"></cmt-box>


    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">評論人: {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>


  </div>


  <template id="tmpl">
    <div>

      <div class="form-group">
        <label>評論人:</label>
        <input type="text" class="form-control" v-model="user">
      </div>

      <div class="form-group">
        <label>評論內容:</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>

      <div class="form-group">
        <input type="button" value="發表評論" class="btn btn-primary" @click="postComment">
      </div>

    </div>
  </template>
var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 發表評論的方法
          // 分析:發表評論的業務邏輯
          // 1. 評論數據存到哪裡去???   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          // 2. 先組織出一個最新的評論數據對象
          // 3. 想辦法,把 第二步中,得到的評論對象,保存到 localStorage 中:
          //  3.1 localStorage 只支持存放字元串數據, 要先調用 JSON.stringify 
          //  3.2 在保存 最新的 評論數據之前,要先從 localStorage 獲取到之前的評論數據(string), 轉換為 一個  數組對象, 然後,把最新的評論, push 到這個數組
          //  3.3 如果獲取到的 localStorage 中的 評論字元串,為空不存在, 則  可以 返回一個 '[]'  讓 JSON.parse 去轉換
          //  3.4  把 最新的  評論列表數組,再次調用 JSON.stringify 轉為  數組字元串,然後調用 localStorage.setItem()

          var comment = { id: Date.now(), user: this.user, content: this.content }

          // 從 localStorage 中獲取所有的評論
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 評論數據
          localStorage.setItem('cmts', JSON.stringify(list))

          this.user = this.content = ''

          // this.loadComments() // ?????
          this.$emit('func')
        }
      }
    }

    // 創建 Vue 實例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我材必有用' },
          { id: Date.now(), user: '江小白', content: '勸君更盡一杯酒' },
          { id: Date.now(), user: '小馬', content: '我姓馬, 風吹草低見牛羊的馬' }
        ]
      },
      beforeCreate(){ // 註意:這裡不能調用 loadComments 方法,因為在執行這個鉤子函數的時候,data 和 methods 都還沒有被初始化好

      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 從本地的 localStorage 中,載入評論列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });

ref獲取DOM和組件

vue中如何操作DOM

 <div id="app">
    <input type="button" value="獲取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈, 今天天氣太好了!!!</h3>

    <hr>

    <login ref="mylogin"></login>
  </div>
var login = {
      template: '<h1>登錄組件</h1>',
      data() {
        return {
          msg: 'son msg'
        }
      },
      methods: {
        show() {
          console.log('調用了子組件的方法')
        }
      }
    }

    // 創建 Vue 實例,得到 ViewModel
    //vm中有一個屬性叫ref
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          // console.log(document.getElementById('myh3').innerText)

          //  ref  是 英文單詞 【reference】   值類型 和 引用類型  referenceError
          // console.log(this.$refs.myh3.innerText)

          console.log(this.$refs.mylogin.msg)
          this.$refs.mylogin.show()
        }
      },
      components: {
        login
      }
    });

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

-Advertisement-
Play Games
更多相關文章
  • 上圖為MySQL的簡易架構圖,給您有一個大概的概念,下麵我將為您進行進一步的分析。 連接器: 當連接MySQL資料庫時,等待的將是MySQL服務端的連接器;連接器的職責是和客戶端建立連接、獲取許可權、維持和管理連接。客戶端連接命令一般是如下所示(建議:不要在命令中顯示添加登入密碼): mysql -h ...
  • SQLServer有四個主要組件:協議,關係引擎(也稱為查詢處理器)、存儲引擎和SQLOS。來自任何客戶端的應用程式,只要是交給SQL Server執行,都必須與這四個組件交互。 協議組件:用於接收請求,並把它們轉換成關係引擎可以處理的形式。另外,協議層還獲取所有查詢的最終結果、狀態消息或錯誤消息, ...
  • 一、介紹 在iOS開發中,轉場動畫的使用無處不見,不只是我們自己更多的使用UIViewblock動畫實現一個轉場動畫,其實,在我們實現VC控制器跳轉的時候都是轉場動畫的實現,例如標簽欄控制器的切換、模態動畫present和dismiss、導航控制器的push和pop。實現它們的轉場動畫,只需要實現它 ...
  • 如何在iOS上通過電子郵件進行無縫的“無密碼”身份驗證。 Apple平臺上的郵件和日曆集成 在macOS和iOS上查看電子郵件時,郵件會在[檢測到的日期和時間]下劃線 。您可以與他們互動以創建新的日曆事件。如果您在“日曆”中打開此類活動,則會在其擴展詳細信息中看到“在郵件中顯示”鏈接。單擊此鏈接可將 ...
  • 如何插入樣式表? 代碼應該寫到什麼地方呢? 代碼分為三種插入方式,接下來筆者給園友們介紹有哪些插入方式: 嵌入式、外鏈式、行內式。 嵌入式 什麼是嵌入式? 嵌入式就是將寫好的 代碼嵌入到 文件中,嵌入式是通過 中的 標簽將 代碼嵌入到 網頁當中的。 語法規則如下: 如果我們使用的是 的文檔, 標簽中 ...
  • 彈性盒子flex: 對於客戶端的佈局非常有用,不管是平均分配space-around這個屬性還是兩端對齊space-betwee在頁面佈局的時候都會有很好的表現。 對於部分內容區域中,具有很多大致內容相同的幾個區塊的佈局都可以使用到它,將父級設置為display:flex;父級就會變成容器,子級就會 ...
  • 1.首先引用jquery以及table2excel <script type="text/javascript" src="js/jquery.table2excel.min.js"></script> <script type="text/javascript" src="js/jquery.mi ...
  • HTML解釋: HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,他是一種製作萬維網頁面標準語言(標記)。相當於定義統一的規則(W3C),大家都來遵守他,這樣就可以讓瀏覽器根據標記語言的規則去解釋它。 瀏覽器負責將標簽翻譯成用戶“看得懂”的格式,呈現給用戶 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...