Vue Vue 的 Props 如何初始化

2021-09-30 00:15:18 字數 1289 閱讀 2501

1.為什麼props在html模板中要使用kebab-case (短橫線分隔命名),而在vue的options裡面宣告props卻要用camelcase (駝峰命名法)?

2.vue中是如何初始化props屬性的?

在_init初始化過程中,如果vue例項有props屬性時候,會對props的屬性進行遍歷操作,把props裡的內容(陣列、物件)變成vue例項的props物件中的屬性

比如:props:[begindate]

會變成props[begindate] =

props:} 或 props:

會變成props[a] = 或 props[name] =

src\core\instance\init.js 中的 _init 方法:當判斷是vue例項時候進入到mergeoptions方法中

mergeoptions在src\core\util\options.js中進行實現

normalizeprops方法則是格式化option中的props

normalizeprops 函式實現如下

function normalizeprops (options: object, vm: ?component) 

let i, val, name

// 根據props是陣列還是物件形式進行不同的遍歷處理,都是返回乙個res物件

// camelize 轉換props屬性名字,把連線字串形式轉換成駝峰式命名

// isplainobject 判斷是否是物件,返回true or false

if (array.isarray(props))

} else if (process.env.node_env !== 'production')

}} else if (isplainobject(props))

}} else if (process.env.node_env !== 'production') .`,vm)

} // 處理後的props重新賦值回vue例項的options.props物件上

options.props = res

}

VUE vue如何定義全域性過濾器

namefiltes 過濾器名稱,值為乙個方法 vue.filter namefiltes function data 1.src目錄下新建 filters index.js 此檔案為過濾器檔案,需要匯出過濾器方法 如 export function get data 2.main.js中引入過濾器...

入門vue (vue的安裝)

1.安裝node.js 2.基於node.js,利用 npm映象安裝相關依賴 在cmd裡直接輸入 npm install g cnpm registry 回車,等待安裝.3.安裝全域性vue cli腳手架,用於幫助搭建所需的模板框架 在cmd裡 1 輸入 cnpm install g vue cli...

props寫法 Vue中props的用法知識點

vue中props的詳解 看一下官方文件 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。父元件的資料需要通過 prop 才能下發到子元件中。也就是props是子元件訪問父元件資料的唯一介面。詳細一點解釋就是 乙個元件可以直接在模板裡面渲染data裡面的資料 ...