常用传值方式、父传子、子传父、非父子组件传值

最新推荐文章于 2023-07-14 22:09:34 发布

舟相随

最新推荐文章于 2023-07-14 22:09:34 发布

阅读量659

点赞数

分类专栏： vue 文章标签： vue中组件传值父往子子往父非父子传值

本文链接：https://blog.csdn.net/weixin_44707104/article/details/90111257

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue常用的三种传值方式有：

父传子
子传父
非父子传值

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

在这里插入图片描述

下面我们就开始用代码详细的介绍vue组件传值的三种方式

1.父传子

子组件的代码：

<template>
    <div id="container">
        {{msg}}
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:{
    msg: String
  }
};
</script>
<style scoped>
#container{
    color: red;
    margin-top: 50px;
}
</style>

父组件的代码：

<template>
    <div id="container">
        <input type="text" v-model="text" @change="dataChange">
        <Child :msg="text"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      text: "父组件的值"
    };
  },
  methods: {
    dataChange(data){
        this.msg = data
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>

父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可

2、子传父

子组件代码

<template>
    <div id="container">
        <input type="text" v-model="msg">
        <button @click="setData">传递到父组件</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "传递给父组件的值"
    };
  },
  methods: {
    setData() {
      this.$emit("getData", this.msg);
    }
  }
};
</script>
<style scoped>
#container {
  color: red;
  margin-top: 50px;
}
</style>

父组件代码：

<template>
    <div id="container">
        <Child @getData="getData"></Child>
        <p>{{msg}}</p>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      msg: "父组件默认值"
    };
  },
  methods: {
    getData(data) {
      this.msg = data;
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>

子往父传值的步骤
1. 在某个函数中，通过this.$emit发射自定义事件，并传递数据
2. 父组件在直接调用子组件的位置上(自定义标签的属性地方)，使用v-on来监听发射的自定义事件，并执行父组件的某个方法，该方法的参数就是传递过来的数据
3. 在父组件中的data中设置某个变量，接收传递的数据

3.非父子组件传值

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件传值---非父子组件</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="demo">
    <h1> 这是根组件，即父组件 </h1>
    <my-com></my-com>
    <my-tab></my-tab>
</div>
<script id="com" type="text/html">
    <div>
        <h2> 这是子组件1111111111</h2>
        <p>
            {{ msgCom }}
        </p>
    </div>
</script>
<script id="tab" type="text/html">
    <div>
        <h2> 这是子组件222222222 </h2>
        <button @click="begin">开始传值</button>
    </div>
</script>
<script>
 	  // 创建一个空的vue实例，用来传输数据
    const bus = new Vue();
    Vue.component('my-com', {
        template:'#com',
        data:function(){
            return {
                msgCom:''
            }
        },
        mounted:function(){
            let that = this;
            // $on监听自定义事件，并执行一个回调函数
            // 回调函数的参数是传递的数据
            bus.$on('chuan', function(val){
                console.log('接收到数据了');
                console.log(val);
                // this指向 bus实例
                console.log(this);
                that.msgCom = val;
            })
        }
    })
    Vue.component('my-tab', {
        template:'#tab',
        data:function(){
            return {
                msg:'这是组件2的数据'
            }
        },
        methods:{
            begin:function(){
                // 通过bus，来调用$emit方法，发射一个自定义事件，并传递数据

                bus.$emit('chuan', this.msg);
            }
        }
    })
    const vue = new Vue({
        el:'#demo',
        data:{
        }
    })
</script>
</body>
</html>

非父子组件传值的步骤

 1. 创建一个新的空的vue实例bus
 2. 在组件A中的某个函数中，通过bus.$emit发射一个自定义事件，并传递数据
 3. 在组件B的mounted生命周期钩子函数中，通过bus.$on来监听自定义事件，并在回调函数中接收传递过来的数据
 4. 在组件B的data中设置一个变量，接收数据

舟相随

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常用传值方式、父传子、子传父、非父子组件传值

Vue常用的三种传值方式有：父传子子传父非父子传值引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：下面我们就开始用代码详细的介绍vue组件传值的三种方式1.父传子子组件的代码：<template> <div id="container...
复制链接

扫一扫