Vue入門（2）元件

元件是可復用的 vue 例項，且帶有乙個名字。元件是vue.js最強大的功能之一。元件可以擴充套件html元素，封裝可重用的**。在較高層面上，元件是自定義的元素，vue.js的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生html元素的形式，以is特性擴充套件。

>

<
/div>
//區域性元件的宣告
var child =
;var boy = vue.
extend()
var vm =
newvue(,
template:
` 
` })
;<
/script>

第乙個引數為元件的名字，第二個引數為options

vue.

component
("vbtn"
,)

先給父元件中繫結自定義的屬性

在子元件中使用props接收父元件傳遞的資料

在子元件中就可以任意使用了

vue.
component
("parent",}
, template :
` 我是父元件-----}
//第一步
`,})vue.
component
("child",}
//第三步
`, props :
["childdata"
]//第二步})
newvue()
<
/script>

在父元件繫結自定義事件

在子元件中觸發原生的事件，在函式中使用$emit觸發自定義的事件

vue.
component
("parent",}
, template :
` 我是父元件
//第一步
`, methods :}}
) vue.
component
("child",}
})newvue(}
, template :
` ` })
<
/script>

Vue入門3 元件

1 區域性元件 元件的定義模式可以直接在程式裡面採用html字串的方式進行定義，先進行乙個區域性元件的定義，所謂區域性元件指的是針對於某個vue物件定義的。js el msgdiv components html 執行結果 2 全域性元件 以上所定義的元件只能夠在當前vue物件使用，所以按照習慣性的...

vue 元件 2 元件引數傳遞》

1 效果 展示出來的資料都是父元件傳給子元件的資料 01 父元件向子元件傳遞資料.html 1 效果 02 父傳子 props中的駝峰標識 html 1 效果 點選後將父元件的引數，傳遞給子元件並展示 03 子傳父 自定義事件 html 父元件展示子元件傳來的引數 1 效果 2 04 子元件改父元件...

Vue2 元件封裝

接觸乙個前端框架，除了基礎的使用語法以外我們接下來都會很關心元件和復用的問題。以下就是個簡單的例子。下面是在父元件中引入子元件的 片段 booklist out container booklist container for book in books book book div button c...