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>