vue學習自定義元件篇 六

(2)私有元件

元件傳值

(2)父傳子方法

(3)子傳父值

(4)兄弟傳

元件場景

總結拓展

(1)全域性元件

元件建立的方式

方式一 extend

>

<
/login>
<
/div>
//方式一
vue.
component
("login"
,vue.
extend()
)new
vue(})
<
/script>方式二 {}
>
<
/register>
<
/div>
//方式二
vue.
component
("register",)
newvue(}
)<
/script>方式三(有提示) template
>
<
/index>
<
/div>
"index"
>
/h1>
<
/template>
//方式三
vue.
component
("index",)
newvue(}
)<
/script>(2)私有元件
>
<
/login>
<
/div>
newvue(,
components:}}
)<
/script>(1)父傳子值
定義父元件和子元件
>
}<
/login>
<
/div>
newvue(,
components:}}
)<
/script>檢視繫結父元件,子元素定義和子元素使用
>
}"msg"
>
<
/login>
<
/div>
newvue(,
components:}}
)<
/script>(2)父傳子方法
建立父元件和子元件
>
}<
/login>
<
/div>
newvue(,
components:}}
)<
/script>檢視繫結父元件,子元件定義,呼叫
>
"show"
>
<
/login>
<
/div>
newvue(,
methods:},
components:}}
}})<
/script>(3)子傳父值
在父傳子方法上加上引數
在子元件上定義資料傳,在父元件上定義資料接收
>
"show"
>
<
/login>
<
/div>
newvue(,
methods:},
components:},
template:
"子元件"
, methods:},
}}})
<
/script>(4)兄弟傳
>
<
/login>
<
/register>
<
/div>
const middle=
newvue()
;new
vue(},
template:"",
created()
)}},
"register":}
, template:
"register"
, methods:}}
}})<
/script>元件切換
兩個元件切換
>
"#" @click.prevent=
"flag=true"
>login<
/a>
"#" @click.prevent=
"flag=false"
>register<
/a>
"flag"
>
<
/login>
else
="flag"
>
<
/register>
<
/div>
newvue(,
components:
,"register":}
})<
/script>多個元件切換
>
"#" @click.prevent=
"turns('login')"
>login<
/a>
"#" @click.prevent=
"turns('register')"
>register<
/a>
"#" @click.prevent=
"turns('index')"
>index<
/a>
"comname"
>
<
/component>
<
/div>
newvue(,
components:
,"register":,
"index":}
, methods:}}
)<
/script>
元件場景 
props:

遇到的vue標籤: template component

vue學習 自定義全域性vue元件

文件目錄 components loading 元件資料夾 loading.vue loading元件核心 index.js 配置匯出元件,並且install 主要配置到處檔案index.js import loadingcomponent from loading.vue 引用元件檔案 定義並註冊...

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同，實現元件的復用，但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料，我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的 在較高層面上，元件是自定義元素，vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...