vue.js 父元件主動獲取子元件的資料和方法、子元件主動獲取父元件的資料和方法
父元件主動獲取子元件的資料和方法
1.呼叫子元件的時候 定義一個ref
<headerchild ref="headerChild"></headerchild>
2.在父元件裡面通過
this.$refs.headerChild.屬性
this.$refs.headerChild.方法
子元件主動獲取父元件的資料和方法
在子元件裡面通過
this.$parent.屬性
this.$parent.方法
演示程式碼:
//父元件
<template>
<div id="header">
<headerchild ref="headerChild"></headerchild>
<button @click="getChild()">父元件獲取子元件的資料和方法</button>
</div>
</template>
<script>
import HeaderChild from './HeaderChild'
export default {
data () {
return {
title:'我是父元件的資料'
}
},
methods: {
getChild (){
console.log(this .$refs.headerChild.name)
},
run (){
console.log("我是父元件裡面的方法")
}
},
components: {
'headerchild': HeaderChild
}
}
</script>
<style lang="sass" scoped></style>
//子元件
<template>
<div id="headerchild">
<button @click="getParent()" >獲取父元件的資料和方法</button>
</div>
</template>
<script>
export default {
data () {
return {
name:'我是子元件裡面的資料'
}
},
methods:{
getParent(){
console.log(this.$parent.title) /*獲取整個父元件*/
this.$parent.run()/*獲取父元件的方法*/
}
},
props:['title','run','home'] /*通過props接收父元件傳遞過來的資料 */
}
</script>
相關推薦
vue.js 父元件主動獲取子元件的資料和方法、子元件主動獲取父元件的資料和方法
父元件主動獲取子元件的資料和方法 1.呼叫子元件的時候 定義一個ref <headerchild ref="headerChild"></headerchild> 2.
vue.js中關於$emit(eventName, optionalPayload) 觸發事件的應用,子元件向父元件傳遞資料(字串,陣列,或者物件等)
一、父元件及程式碼解釋:<template> <div> <p v-for="msg in messages">{{msg}}</p>
子類A繼承父類B, A a = new A(); 則父類B建構函式、父類B靜態程式碼塊、父類B非靜態程式碼塊、子類A建構函式、子類A靜態程式碼塊、子類A非靜態程式碼塊 執行的先後順序是?
(1)子類A繼承父類B, A a = new A(); 則: 父類B靜態程式碼塊->子類A靜態程式碼塊->父類B非靜態程式碼塊->父類B建構函式->子類A非靜態程式碼塊->子類A建構函式 (2)若子類建構函式中顯式的呼叫了父類
vue.js插槽Slot的用法與具名插槽、作用域插槽的使用
1、基本用法 插槽指允許將自定義的元件像普通標籤一樣插入內容 import Vue from 'vue' // 定義元件componentOne const compoentOne = { template: ` <di
vue單頁應用中 返回列表記住上次滾動位置、keep-alive快取之後更新列表資料 那點事
實踐場景需求 產品列表中,滾動到一定位置的時候,點選檢視產品資訊,後退之後,需要回到原先的滾動位置,這是常見的需求 所有頁面均在router-view中,暫時使用了keep-alive來快取所有頁面,所以進入不同分類的產品列表,和不同的產品詳情頁面,需要更新資料 首先注意: 本次實踐測試環境為pc
Servlet(ServletContext配置全域性引數、ServletContext方法、屬性檔案中獲取資料庫連線引數)
通過ServletContext物件獲取資料庫全域性配置在web.xml中的連線引數的值 配置檔案web.xml中的程式碼 <!-- 這是全域性的資料庫連線引數配置 --> <context-param> <param-name>
學習筆記day64-----oracle-sql標準的表連線、集合運算、函式和分組、子查詢、表操作
1、sql標準中的表連線 1.1、內連線 語法: select 欄位列表 from 表1 [inner] join 表2 on 關聯條件; --三表
Vue學習(8)————————父子元件傳值,父元件主動獲取子元件數值方法,子元件主動獲取父元件各項,非父子元件傳值
在父元件的引用標籤裡 加入冒號屬性 <template> <div> <!--這裡冒號屬性就是寫入子元件數值--> <v-header :title="title"></v-header> <h1>新聞
[vue.js]解決子元件無法獲取父元件store中的值的問題
子元件: props:['myDetail'] 父元件: <子元件 :myDetail="detail"></子元件> computed:{ detail
Vue.js子元件向父元件通訊
一、場景描述: 曾經有個電商專案,其中有個“老帶新”模組,而且該模組新增的入口很多,但是新增後展示效果還不一樣,當時就考慮將新增的元件單獨拿出來,其實就是一個子元件向父組同步資料的過程。 當然,背景不重要了,關鍵是看實現的方式。 二、場景展示效果 (PS:展示效果請忽略美感)
vue.js父元件給子元件傳遞資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script t
Vue.js的元件(二)父元件與子元件的資料聯絡 之 父傳子
假設有如下元件: /*js*/ Vue.component('my-button',{ tempalte:'<button>一個按鈕</button>' }) var app3 = new Vue({ el:'#ap
Vue.js的元件(三)父元件與子元件的資料聯絡 之 子傳父 之 自定義事件
父傳子是單向的,子會因父的改變而改變,但父並不會因子的改變而改變。這是由於Vue.js怕父的資料會被使用者在不知情的情況下改變。 但是,子還是可以繞一個圈,把自己的資料傳給父。 途徑:自定義事件。 在解釋子資料傳給父之前,必須先要對事件有一個瞭解。 所謂
子元件傳遞資料到父元件(vue.js)
父元件: app.vue <template> <div id="app"> <img src="./assets/logo.png"> <!-- 父元件傳遞資料給子元件: 在呼叫
Vue.js的元件(四)父元件與子元件的資料聯絡 之 雙向繫結
之前有說到,父元件傳資料到子元件是通過元件的屬性props來實現的,這是一種單向繫結。父可以影響子,子不能影響父。 但是子可以通過自定義事件來讓自己的資料影響到父。 只要把這兩種方法結合起來,就可以
父元件向子元件傳遞資料(vue.js)
父元件: app.vue 子元件: header.vue 子元件: <template> <div> <!-- logo 是在data中(父元件)定義的變數
【vue.js】子元件的引數值不隨著父元件值的改變而改變
子元件 props['myDetail'] 父元件computed:{ detail(){ return this.$store.state.XXXX.yyyy } } <子元件 :myDe
Vue.js父元件$on無法監聽子元件$emit觸發事件解決辦法
Vue.js父元件$on無法監聽子元件$emit觸發事件解決辦法 最近學習vuejs看例子中用$on無法監聽子元件$emit觸發事件: 使用版本 vue.js 2.2.5 參考文獻 1.v
Vue的三種常用傳值方式、父傳子、子傳父、非父子元件傳值
Vue常用的三種傳值方式有:1.父傳子 2.子傳父 3.非父子傳值 父子元件的關係可以總結為 prop 向下傳遞,事件向上傳遞。父元件通過 prop 給子元件下發資料,子元件通過事件給父元件傳送訊息。 1. 父元件向子元件進行傳值 父元件: <temp
vue 父元件呼叫子元件的方法,子元件呼叫父元件方法
首先看程式碼: 1、父元件: <template> <div> <div v-if="!userShow"> 父元件內容區 <el-button @click="lookUserInfo(scope.row)">&nb