vue中的slot,ref,router

1.slot

在使用子組件的時候
常見使用方式包括:
1.<child></child>僅僅使用
2. <child :a=aa @pulldown=pulldown></child>動態傳遞數據和幫定函數。
3. <child><div>kkk</div></child>在子組件中插入其他元素,而不是傳入數據這麼簡單,而是要將html界面(可以是html上任何元素,幾個字,

等元素,甚至可以是其他組件),那麼這裏就需要使用slot來接收,表示你這些kkk可以放到子組件的什麼位置。

2.ref

1父子間傳值

在父組件,調用子組件:<child></child>,父子組件間通信可以是父傳子
(父組件使用<child :a=aa ></child>將變量aa的值傳入到a中,然後傳入到子組件child中,在child中使用props來接收並使用數據)也可以是子傳父(父組件中使用<child @pulldown=pulldown></child>將函數pulldow傳入到子組件中,子組件child中使用emit來使用該方法,同時在子組件中傳參,就相當於使用了子組件的參數,但是函數體確實父組件中提供的,這個和js中回調函數有點類似)。外部(父組件)傳入回調函數(只是函數體),至於何時觸發和傳入什麼參數,都是由內部(子組件)決定)

2.使用父組件中使用ref直接獲取子組件這個對象

獲取到這個子組件(vue對象)就可以隨意調用子組件中的方法。這裏還可以直接獲取子組件本身,
在父組件中使用:

<child ref='childObj'></child>

這樣就使用了子組件了,然後如何在父組件的js中(比如method中)獲取子組件對象呢?

 this.$refs.childObj

獲取其對象,並調用子組件中method中的方法:

this.$refs.recommend.update()

3router路由

router-link(設置跳轉到哪裏)和router-view(當前組件下可以跳轉到某個組件,將當前跳轉的組件放到當前組件的某個位置,比如:
在這裏插入圖片描述
未完待續。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章