VUE參考 父元件向子元件傳遞方法

2022-03-07 20:27:50 字數 2371 閱讀 4236

1、在使用元件的位置傳遞方法:父元件中的show方法,子元件通過func使用:

2、在子元件中通過$emit註冊方法func,this.sonmsg是傳遞的引數:this.$emit('func', this.sonmsg)

3、使用傳遞過來的方法,在click中:

<

div

id>

<

com2

@func

="show"

>

com2

>

div>

<

template

id="tmpl"

>

<

div>

<

h1>這是 子元件

h1>

<

input

type

="button"

value

="這是子元件中的按鈕 - 點選它,觸發 父元件傳遞過來的 func 方法"

@click

="myclick"

>

div>

template

>

<

script

>

//定義了乙個字面量型別的 元件模板物件

varcom2

= }

},methods: }}

//建立 vue 例項,得到 viewmodel

h1>這是 子元件

h1>

21<

input

type

="button"

value

="這是子元件中的按鈕 - 點選它,觸發 父元件傳遞過來的 func 方法"

@click

="myclick"

>

22div

>

23template

>

2425

<

script

>

2627

//定義了乙個字面量型別的 元件模板物件

28var

com2 =33

}34},35

methods: 42}

43}4445

46//

建立 vue 例項,得到 viewmodel

47var

vm =

newvue(,

52methods:

58},

5960

components:

64});

65script

>

66body

>

6768

html

>

vue 父元件通過props向子元件傳遞方法的方式

vue 中 data computed methods 中 this的上下文是vue例項,需注意。例如 注意,不應該對 data 屬性使用箭頭函式 例如data 理由是箭頭函式繫結了父級作用域的上下文,所以 this 將不會按照期望指向 vue 例項,this.myprop 將是 undefined...

vue子元件向父元件傳遞資料

vue專案中經常使用到元件之間的數值傳遞,實現的方法很多,但是原理基本上大同小異。子元件向父元件出傳遞資料,使用自定義事件的方式。父元件向子元件傳遞資料,使用props屬性的方式。推薦文章 vue筆記 父元件向子元件傳遞資料 我們可以從子元件中想父元件中傳遞多個資料,在子元件中要做的工作只是,使用t...

父元件向子元件傳遞資料 14 父元件向子元件通訊

1.不使用 v bind 傳遞資料 2.使用 v bind 傳遞資料 3.以上兩者的區別。先把重要的知識點寫在前面 簡單來說,父元件向子元件傳遞資料可以分為以下幾個步驟 在父元件繫結資料 在子元件使用 props 接收資料 在子元件使用資料。data components 渲染 2.在子元件上繫結 ...