当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue组件传值,父子传值,子父传值,兄弟传值,组件主动获取数据及方法

vue组件传值,父子传值,子父传值,兄弟传值,组件主动获取数据及方法

2020年07月26日  | 移动技术网IT编程  | 我要评论

一.父子传值

  • 父组件引入子组件并注册
  • 在标签通过动态绑定data里的值
  • 子组件通过props接收父组件传递过来的参数

主动获取值

  • 父组件里注册的子组件标签里写上ref
  • 在mounted声明周期函数里打印this.$refs.name.msg即可

效果图
在这里插入图片描述

// 父组件
<template>
  <div>
    <fatherSon :num=num :go='go' ref="name"></fatherSon>
  </div>
</template>

<script>
  import fatherSon from './components/father_son'
export default {
  components: {
    fatherSon
  },
  data() {
    return {
      num: 6
    }
  },
  methods: {
    go() {
      alert('this is father')
    }
  },
  mounted() {
    console.log(this.$refs.name.msg)
  }
}
</script>

// 子组件
<template>
    <div>
        <button @click="go">点我</button>
        <p>{{ num }}</p>
    </div>
</template>
<script>
export default {
    props: ['num' ,'go'],
    data() {
        return {
            msg: '子组件'
        }
    },
}
</script>
<style>
    button {
        display: inline-block;
        width: 90px;
        height: 60px;
        font-size: 30px;
        line-height: 30px;
        margin-right: 20px;
    }
    p {
        font-size: 30px;
    }
</style>

二.子父传值

  • 子组件通过自定义事件,以$emit给父组件传送一个事件
  • 父组件通过子组件传送过来的事件去写方法

主动获取值

  • 子组件在mounted声明周期函数中通过this.$parent.msg即可

效果图
在这里插入图片描述

// 子组件
<template>
    <div>
        <button @click="add">+</button>
        <button @click="del">-</button>
        <p>{{ num }}</p>
    </div>
</template>
<script>
export default {
    props: ['num' ,'go'],
    methods: {
        add() {
            this.$emit('addNum')
        },
        del() {
            this.$emit('delNum')
        }
    },
    mounted() {
        console.log(this.$parent.msg)
    },
    data() {
        return {
            
        }
    },
}
</script>
<style>
    button {
        display: inline-block;
        width: 90px;
        height: 60px;
        font-size: 30px;
        line-height: 30px;
        margin-right: 20px;
    }
    p {
        font-size: 30px;
    }
</style>


// 父组件
<template>
  <div>
    <fatherSon @addNum="add" @delNum="del" :num=num></fatherSon>
  </div>
</template>

<script>
  import fatherSon from './components/father_son'
export default {
  components: {
    fatherSon
  },
  data() {
    return {
      num: 6,
      msg: '父组件'
    }
  },
  methods: {
    add() {
      this.num--
    },
    del() {
      this.num++
    }
  },
}
</script>

兄弟组件传值

  • 新建一个js文件作为仓库
  • 两个兄弟组件都引入这个js文件
  • brother组件通过VueEvent.$emit(‘toSister’, this.msg)传数据,第一参数是数据名,第二个是参数是要传递的数据
  • sister组件通过 VueEvent.$on(‘toSister’, function(data) {})接收数据,第一个参数是数据名,第二个参数是函数,data就是brother传递过来的数据
    效果图
    在这里插入图片描述

// 父组件
<template>
  <div>
    <brother></brother>
    <br>
    <br>
    <sister></sister>
  </div>
</template>

<script>
  import brother from './components/brother'
  import sister from './components/sister'
export default {
  components: {
    brother,
    sister
  },
  data() {
    return {
      
    }
  },
  methods: {
   
  },
}
</script>

// brother组件
<template>
    <div>
        brother组件
        <button @click="go">传值</button>
    </div>
</template>
<script>
    import VueEvent from '../VueEvent'
export default {
    methods: {
        go() {
            VueEvent.$emit('toSister', this.msg)
        }
    },
    data() {
        return {
            msg: 'brother组件的msg'
        }
    },
}
</script>
<style>
   div {
       width: 100px;
       height: 30px;
       line-height: 30px;
       text-align: center;
   }
</style>

// sister组件
<template>
    <div>
        sister组件
    </div>
</template>
<script>
    import VueEvent from '../VueEvent'
export default {
    
    mounted() {
        VueEvent.$on('toSister', function(data) {
            this.msg = data
            console.log(this.msg)
        })
    },
    data() {
        return {
            msg: 'sister组件'
        }
    },
}
</script>
<style>
   div {
       width: 100px;
       height: 30px;
       line-height: 30px;
       text-align: center;
       background-color: red;
   }
</style>

本文地址：https://blog.csdn.net/weixin_45045593/article/details/107581000

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网