vue從入門到精通之基礎篇(二)組件

(1).局部組件的使用

? 渲染組件-父使用子組件

  • 1: 創建子組件(對象)
    • var Header = { template:'模板' , data是一個函數,methods:功能,components:子組件們 }
  • 2: 在父組件中聲明,根屬性components:{ 組件名:組件對象 }
  • 3: 在父組件要用的地方使用 <組件名></組件名>
    • 在不同框架中,有的不支持大寫字母,用的時候
      • 組件名 MyHeader
      • 使用 my-header
  • 總結: 有父,聲子,掛子,用子

(2).注冊全局組件

  • 應用場景: 多出使用的公共性功能組件,就可以注冊成全局組件,減少冗余代碼
  • 全局API Vue.component('組件名',組件對象);

(3).組件深入


父子組件傳值(父傳子)

  • 1:父用子的時候通過屬性Prop傳遞
  • 2:子要聲明props:[‘屬性名’] 來接收
  • 3:收到就是自己的了,隨便你用
    • 在template中 直接用
    • 在js中 this.屬性名 用
  • 總結:父傳,子聲明,就是子的了
  • 小補充: 常量傳遞直接用,變量傳遞加冒號

總結父傳子

  • 父用子 先聲子,掛子,用子
  • 父傳子 父傳子(屬性),子聲明(收),子直接用(就是自己的一樣)

子傳父

  • 1.子要綁定原生事件,在原生事件函數中通過this.$emit(‘自定義的事件名’,arg1);觸發父組件中子組件自定義的事件名
  • 2.父組件中的子組件v-bind:自定義事件的名字 = 'fn'綁定自定義的事件
  • 3.父組件 就可以觸發fn的函數 數據就可以從子組件中傳過來了

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249285.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249285.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249285.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

@Scheduled

Scheduled注解的使用這里不詳細說明&#xff0c;直接對8個參數進行講解。 參數詳解 cron 該參數接收一個cron表達式&#xff0c;cron表達式是一個字符串&#xff0c;字符串以5或6個空格隔開&#xff0c;分開共6或7個域&#xff0c;每一個域代表一個含義。 cron表達式語法 […

eclipse2019-03設置代碼編輯區背景為圖片

一、我的主題設置如下所示 二、找到如下所示或類似的文件夾 三、在該文件夾里的images文件夾里添加圖片 四、在CSS目錄下的e4-dark_win.css文件中添加如下代碼   .MPart StyledText {     background-image: url(./bg.jpg);     background-repeat: no-repeat;  …

idea集成gitlab使用ssh免密登錄

網上有很多介紹ssh免密登錄的文章&#xff0c;具體步驟如下&#xff1a; 1. 生成SSH Key ssh-keygen -t rsa -C "your_emailexample.com" 默認會在相應路徑下&#xff08;/your_home_path&#xff09;生成id_rsa和id_rsa.pub兩個文件&#xff0c;此時終端會顯示&…

vue從入門到精通之基礎篇(三)生命周期

生命周期 定義&#xff1a; 每個 Vue 實例在被創建時都要經過從創建倒掛載再到更新、卸載的一系列過程&#xff0c;同時在這個過程中也會運行一些叫做生命周期鉤子的函數&#xff0c;可以讓我們用自己注冊的js方法控制整個大局&#xff0c;在這些事件響應方法中的this直接指向…

libcurl庫進行http通訊網絡編程

https://www.cnblogs.com/lifan3a/articles/7479256.html

Java 開始

&#xff08;事先聲明&#xff1a;該文章并非完全是我自己的產出&#xff0c;更多的是我個人在看到資料后通過理解并記錄下來&#xff0c;作為自己閱讀后的一個筆記&#xff1b;我現在試圖對自己多年工作中的知識點做一個回顧&#xff0c;希望能融會貫通&#xff09; &#xff…

Java核心技術筆記——第 12 章 反射

轉載自&#xff1a;[https://www.cnblogs.com/chanshuyi/p/head_first_of_reflection.html] 12 反射 1. 引入反射 通常情況下&#xff0c;調用一個類的方法的步驟如下&#xff1a; 創建該類的對象。調用該對象的方法。通過這種方式調用方法時&#xff0c;必須要知道類的定義以及…

HTML5知識點匯總

1、HTML5新特性 用于繪畫的canvas標簽用于媒介回放的video和audio元素對本地離線儲存的更好支持新的特殊內容元素&#xff0c;如&#xff1a;article、footer、header、nav、section、aside、hgroup、figure新的表單控件&#xff0c;如&#xff1a;calendar、date、time、emai…

實用網站

https://blog.csdn.net/devcloud/article/details/103121883

網絡(圖)(數學)

轉載于:https://www.cnblogs.com/fengxunling/p/9781575.html

DES加解密時 Given final block not properly padded 的解決方案

事情的經過是這個樣子的。。。。。。 先說說問題是怎么出現的。根據客戶需求&#xff0c;需要完成一個一鍵登錄的功能&#xff0c;于是我的項目中就誕生了DesUtil&#xff0c;但是經過幾百次測試&#xff0c;發現有一個登錄直接報錯&#xff01;難道又遇到神坑啦&#xff01;&a…

java 算法優化向導

一.什么是數據結構&#xff1f;什么是算法 不必像學生時代深究定義。以一個簡單的例子說明。 數據結構&#xff0c;圖書館的書怎么擺列&#xff0c;按照書的類型&#xff0c;作者&#xff0c;出版時間&#xff0c;語言等等放置&#xff0c;這就是數據的結構。 算法&#xff0c…

appium工作原理

Appium原理 面試的時候&#xff0c;被問到appium原理&#xff0c;一點不會&#xff0c;實在尷尬。大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/69220719 appium運行時安裝的2個應用&#xff1a;Appium Settings和Unlock。 一、appium加載的過程圖解&…

LeetCode 21. Merge Two Sorted Lists

LeetCode 21. Merge Two Sorted Lists 分析 難度&#xff1a;易 題目 Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. Example: Input: 1->2->4, 1->3->4 Out…

Mac OS X 下 TAR.GZ 方式安裝 MySQL

Mac OS X 下 TAR.GZ 方式安裝 MySQL 注意: 本篇文章適用與 MySQL 5.6 版本的安裝, 但已不再適用 5.7 的安裝, 5.7 的安裝方式請參見:《Mac OS X 下 TAR.GZ 方式安裝 MySQL 5.7》 在 Mac 系統上, 安裝 MySQL Server 一般是用 DMG 包在圖形化界面下按提示安裝, 此外 MySQL 還提供…

快排再改進

快排再改進 #include <iostream> using namespace std;void mySwap(int &a, int &b) {int temp a;a b;b temp; }void insertSort(int a[], int left, int right) {int tmp;int in 0;int out 0;for (out left 1; out < right; out) {tmp a[out];in ou…

【Linux基礎】crontab定時命令詳解

周期執行的任務一般由cron這個守護進程來處理[ps -ef|grep cron]。cron讀取一個或多個配置文件&#xff0c;這些配置文件中包含了命令行及其調用時間。cron的配置文件稱為“crontab”&#xff0c;是“cron table”的簡寫。 一、cron服務  cron是一個linux下 的定時執行工具&a…

5個Vue.js項目的令人敬畏的模板

開發人員查看使用SPA&#xff0c;Webpack&#xff0c;身份驗證&#xff0c;GraphQL&#xff0c;文檔和測試的Vue開發人員的資源。 你準備開始一個重要的Vue項目嗎&#xff1f;為了確保從堅實的基礎開始&#xff0c;您可以使用模板&#xff08;也就是樣板&#xff0c;骨架&#…

測試多個輸入條件的方法

轉載于:https://www.cnblogs.com/www-qcdwx-com/p/10641281.html

問題規模

問題規模本身并沒有非常精準的定義吧一般都是指運行時間t和輸入參數個數n的關系用O(n)表示比如max([x])就是O(n)而冒泡排序則是O(n^2)