VUE(組建間傳值)

1. created()

 //生命周期函數非常重要，調用方法，傳回給data資料

    created(){

      this.username = '哇哈哈'

    }

2.父向子傳值，自定義屬性

// 導入子元件。

import Left  from '@/components/Left.vue'

//引入元件

  components:{

        Left,

    },

//資料

  data(){

        return {

            username :'admin',

            userinfo:{name: 'admin',age:18 },

            }

//元件自定義username1，userinfo兩個屬性。

<Left :username1="username" :userinfo="userinfo" ref="resetleft"></Left>

//接收屬性

 props:['username1','userinfo'],

<h3>{{ username1 }}</h3>

 <h3>{{ userinfo }}</h3>

2.子向父傳值，自定義方法

//add方法（子元件）

 <button @click="add">加一</button>

// this.$emit 定義了一個numchange 方法。傳一個this.counts值

  methods:{

        add(){

       this.counts ++;

       this.$emit("numchange",this.counts)

        }

//導入元件（父元件）

import Right from '@/components/Right.vue'

 components:{

        Right,

//numchange子元件定義的方法，getNewCounts父元件方法

 <Right @numchange="getNewCounts"></Right>

   methods: {

    getNewCounts(val){

         this.newcounts = val;

//資料接收

 data(){

            newcounts:0

{{newcounts}}   子向父傳值

3.兄弟元件傳值，eventbus.js

//建立eventbus.js,向外共享

import Vue from 'vue'

export  default new Vue();

//導入eventbus.js(發送元件)

import bus from '@/components/eventBus.js'

<button @click="sendmmm">發送詩句</button>//定一個sendmmm方法

            str:'十步殺一人，千裡不留行。'

//方法

methods:{

        sendmmm(){

            bus.$emit("share",this.str)

//接收元件

import bus from '@/components/eventBus.js'//導入eventbus.js

            exceptmessagefromleft:'111'

//share方法

  created(){

        bus.$on("share",val =>{

        this.exceptmessagefromleft= val

        })

     }

<h3>接收到左側資料--{{exceptmessagefromleft}}</h3>