ref 和 $refs 父子組件方法調用 vue項目打包（2018/12/4）

時間 2020-06-04

標籤 ref refs 父子組件方法調用 vue 項目打包简体版

原文原文鏈接

1、ref 和 $refs 的使用

ref

ref 用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的$refs對象上。若是在普通DOM元素上使用，引用指向的就是DOM元素；若是用在子組件上，引用就指向組件實例。

$refs

通常來說，獲取DOM元素，需document.querySelector（".text"）獲取這個dom節點，而後在獲取text的值。可是用ref綁定以後，咱們就不須要在獲取dom節點了，直接在上面的input上綁定text，而後$refs裏面調用就行。而後在javascript裏面這樣調用：this.$refs.text 這樣就能夠減小獲取dom節點的消耗了

2、父子組件的方法調用

父組件調用子組件的方法先用ref=「xxx」在子組件進行註冊而後用 this.$refs.xxx.方法（）進行調用

子組件調用父組件的方法 this.$parents.方法（）

<body>

<button @click="text">調用子組件的方法</button>

</div>

var com ={ //子組件

template:`<div @click="chi"><slot name="left"></slot>這是子組件</div>`, //子組件的事件要寫在模板裏

methods:{

fun(){

alert("這是子組件的方法")

chi(){ //子組件調用父組件的方法