? vue父子组件互相传值 - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


vue父子組件互相傳值

2019-7-24 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容,每天自動發到您的郵箱中,

一、父組件給子組件傳值

1、父組件調用子組件的時候,綁定動態屬性

/*傳值可以是值“title”、是方法“run”、是組件“this”*/
<v-header :title="title" :run="run" :home="this"></v-header>
1
2
2、在子組件里面通過props接受父組件傳過來的數據

<script>
    export default{
props:['title','run','home']
}
</script>

二、父組件主動獲取子組件的數據和方法

1、調用子組件的時候定義一個ref

<v-header ref="header"></v-header>
1
2、在父組件里面通過以下方式獲取屬性和方法

this.$refs.header.屬性
this.$refs.header.方法

三、子組件主動獲取父組件的數據和方法

this.$parent.數據
this.$parent.方法

四、非父子組建傳值

1、新建一個js文件 然后引入vue 實例化vue最后暴露這個實例

VueEvent.js

import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;

2、在要廣播的地方引入剛才定義的實例,并進行廣播

home.vue

<script>
import VueEvent from './VueEvent.js';
    export default{
        methods:{
            emitNews(){
                /*廣播數據*/
                VueEvent.$emit('to-news',this.數據)
            }
        }
}
</script>

3、在要接收數據的地方接受廣播

news.vue

<script>
import VueEvent from './VueEvent.js';
    export default{
        /*在生命周期函數里寫,編譯的時候就調用*/
        mounted(){
            /*接受廣播*/
            VueEvent.$on('to-news',function(data){
                console.log(data);
            })
        }
}
</script>


標簽: vue父子組件互相傳值 « 用大數據告訴你什么樣的圖最受歡迎! | Bitmap三級緩存 和二次采樣»


藍藍 http://www.thriveonsite.com

訂閱Rss
网赚兼职项目 不下载软件的网赚 19年点击网赚 互联网赚钱方式 网赚论坛靠谱吗 互联网赚钱网站 内蒙古快3 河南快3 163网赚网 网赚好一点的平台