我們通常把路由直接對映(繫結)的元件稱為 路由元件,也只有路由元件才能直接呼叫路由有關物件:$router
、$route
當我們乙個元件即希望作為路由元件使用,又可能作為功能元件(某個頁面中的一部分)去使用,這個時候路由元件傳參的方式來做到這點
*1.父元件向子元件傳遞引數(還可以傳遞函式) ====》props*
父元件通過自定義屬性的方式傳給子元件(:parentmsg=」msg」),子元件用props接受(props:[「parentmsg」])
"mag"
>
<
/ahead>
newvue(}
)
vue.
component
("ahead"
, template:
`<}+
` }
)
如果你想看到錯誤,你要用vue的非壓縮版
vue.
component
("example",,
// 數字有預設值
propd:
,// 陣列、預設值是乙個工廠函式返回物件
prope:;}
},// 自定義驗證函式
propf:}}
});
事件繫結機制:父元件通過自定義事件的方式向子元件傳遞方法(@mymsg=「show」),子元件用this.emi
t()接
受(th
is
.emit()接受(this.
emit()
接受(t
his.
emit(fun,引數1,引數2)),引數可以是子元件的,順便傳給父元件,實現子元件向父元件傳值
"get"
>
<
/aaa>
//子元件
var a=},
methods:},
template:``
}}//父元件
newvue(,
methods:},
components:
})
3.元件之間相互傳參 原生事件法
var event=
newvue()
; event.
$emit
(自定義事件名,引數1,引數2...
) 傳送引數
event.
$on(自定義事件名,()
=>
) 接收引數
全域性:var event=
newvue()
;元件1:
methods:},
元件2:methods:},
元件3:
mounted()
)event.
$on(
"mymsgtwo"
,function
(two)
.bind
(this))
;},
4.$parent 獲取父元素的資料/方法
$root 獲取根元件的資料/方法
$children 獲取子元素的資料/方法(mounted鉤子函式,要有下標)
$refs 獲取子元件的方法和資料/作用2:獲取dom元素
(一定要使用 ref屬性)
<
!doctype html>
"utf-8"
>
<
/title>
"js/vue.js"
>
<
/script>
<
/head>
>
"one" @click.native=
"show"
>
<
/ahead>
>
內容<
/h1>
"getchild"
>獲取子元素<
/button>
<
/div>
"head"
>
}<
/h1>
}"getfar"
>獲取父元素<
/button>
<
/div>
<
/template>
var ahead=},
methods:},
template:
"#head"
}var vm=
newvue(,
methods:
,getchild()
},components:})
<
/script>
<
/body>
<
/html>
vue元件傳參
負值元件的定義有兩種,我稱為常規父子元件和特殊父子元件。1.1 常規父子元件 將其他元件以import引入用自定義標籤接收,在當前元件中component裡註冊該標籤,頁面上可以直接用 自定義標籤 引入子元件 註冊子元件 使用子元件 1.2 特殊父子元件 在路由中定義好元件,元件中含有childre...
Vue元件傳參
通常,父元件的模板中包含子元件,父元件要正向地向子元件傳遞資料或引數,子元件收到後根據引數的不同來渲染不同的內容,或者執行操作。這個正向傳遞資料的過程是通過props來實現的。在元件中,子元件使用props來宣告需要從父元件接受的資料。但是父元件不能向子元件傳遞資料。需要注意的是 在 js中物件和陣...
vue傳參,元件之間傳參 路由傳參 vuex
詳見 兩種情況 params 和 query 都可以在目標元件的生命週期裡,通過 this.route 進行獲取 例 首頁中精選主題的路由傳參 精選主題 1 簡單舉例 a 一般會新建 store 資料夾,在 index.js 初始化 vuex b 在 main.js 中,引入 c 例如,在我的頁面修...