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.在子元件上繫結 ...