vue2组件之间传值（数据共享）

父组件中使用子组件时，直接绑定属性，将要传递的值通过该属性传递给子组件。

cn33333

5562人浏览 · 2022-11-09 17:16:26

cn33333 · 2022-11-09 17:16:26 发布

1.父组件向子组件传值

自定义属性（:属性名、props）

① 数据传递：
父组件中使用子组件时，直接绑定属性，将要传递的值通过该属性传递给子组件

<子组件名 :属性名="属性值"/>

② 数据接收：
子组件接收父组件传递过来的值，使用：props

export default {
  // 、、、
  props: ['属性名']
  // 、、、
}

③ 数据使用：

子组件接收到父组件传递过来的值后，直接通过props里面的属性名，使用该属性

注意：props里面接收的属性名要和父组件使用子组件时写的传递的属性名一致

示例：

父组件 App.vue

<template>
   <div id="app">
       <div>父组件</div>
       <!-- 父组件 给 子组件  传递数据 -->
       <props :name="name" :age="20" :sex="'女'" :foods="foods"/>
   </div>
</template>

<script>
   //引用子组件
   import props from './components/props.vue';

export default {
    name:'App',
    //注册组件
    components:{ props},
    
   data(){
    return{
       //传给子组件的值
       name:'张三',
       foods:['鱼','蛋糕'],
    }
   },

}
</script>

子组件 props.vue

<template>
  <div class="props">
     <div>子组件</div>
     <h4>我叫：{{name}}</h4>
     <h4>我今年：{{age}}</h4>
     <h4>性别：{{sex}}</h4>
     <h4>我喜欢的食物是：</h4>
     <ul  v-for="item in foods" :key="item">
        <li> {{ item }} </li>
     </ul>

  </div>
</template>

<script>
export default {
name:'props',
//子组件接收父组件传递过来的值，使用：props

//1.简单声明接收
props:['name','age','sex','foods']

//2.接收的时候对数据进行类型限制
// props:{
//    name:String,
//    age:Number,
//    sex:String,
//    foods:[]
// }
//3.接收的时候对数据：进行类型限制 + 默认值的指定 + 必要性的限制
// props:{
//     name:{
//         required:true,//是否是必要传值  可不要时为 false
//         type:String, //定义类型 类型  ：字符串类型、
//         default:"张三"   //没有传值的话 默认值 一般与 required:false 一起用
//     }
// }

//备注：props是只读的，如果修改了就会发出警告，想要修改就复制props中的一份，然后去data修改中的据。

}
</script>

页面效果：

2.子组件向父组件传值：

自定义事件(@自定义事件名、$emit)

① 数据传递：

子组件中使用 $emit 将数据传递给父组件

this.$emit('自定义事件名', '要传递的数据')

② 数据接收：

父组件使用子组件时，绑定自定义事件，接收子组件传递过来的数据

<子组件名 @自定义事件名="方法名"/>

methods: {
    方法名(val) {
      // val 是子组件传递过来的数据
      // 、、、
    }
  }

③ 数据使用：

数据转存- - -父组件中定义一个变量，将子组件传递过来的数据转存到该变量，然后使用该变量

示例

父组件 App.vue

<template>
 <div class="app">
   <h1>{{msg}},学生姓名是：{{studentName}}</h1>

    <!--  第一步 -->
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据  -->
   <Student v-on:atguigu="getStudentName" />
    <!-- 只触发一次 -->
   <!-- <Student @atguigu.once="getStudentName"/> -->
    <!-- 给组件加事件的时候要加 .native -->
   <!-- <Student v-on:atguigu="getStudentName" @click.native="show"/> -->

 </div>
</template>

<script>
 import Student from './components/Student.vue';

  export default {
     name:'App',
     components:{Student},

     data() {
      return {
        msg:'父组件',
        studentName:''
      }
     },
     methods:{

      // 第四步  当多个数据传递过来的时候用 ...params 来接收
      getStudentName(name,...params){
        console.log('app收到学生名:'+name+params)
        this.studentName = name
      }
     },


  }
</script>

<style scoped>
 .app{
  background-color: gray;
  padding: 5px;
 }
</style>

子组件 Student.vue

<template>
  <div class="student">
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>

      <!-- 第二步 -->
      <button @click="getStudentName">传给School学生名</button>

  </div>
</template>

<script>
export default {
   name:'Student',
   data() {
    return {
        name:'张三',
        sex:'女'
    }
   },
   methods:{
    //  第三步
    getStudentName(){
      //触发Student组件实例身上的 atguigu 事件
      //可以传递多个值
      this.$emit('atguigu',this.name,444,555)
    },
    

}
</script>

<style scoped>
   .student{
    background-color: pink;
    padding: 5px;
    margin-top: 30px;
   }
</style>

点击传给School学生名页面效果：

3.子组件之间传值：

子组件之间传值第一种方法：

EventBus(eventBus.js，emit emit，emit，on)

兄弟组件 Left.vue Right.vue 之间传递数据，例如 Left.vue 向 Right.vue 传递数据

1. 先创建一个 eventBus.js 文件，导出一个 Vue实例，内容如下：

import Vue from 'vue'

export default new Vue()

2. 数据传递：

① 传递数据的组件中，导入 eventBus.js

import bus from './eventBus.js'

② 使用 $emit 传递数据

bus.$emit('自定义事件名', 传递的数据)

3. 数据接收：

① 传递数据的组件中，导入 eventBus.js

import bus from './eventBus.js'

② 使用 $on 接收数据

bus.$on('自定义事件名', val => {
  // ③ 数据转存 、、、
})

4. 数据使用：

数据转存- - -父组件中定义一个变量，将子组件传递过来的数据转存到该变量，然后使用该变量

示例

1.在src下创建utlist文件在文件中创建eventBus.js

import vue from 'vue'

export default new vue()

App：

<template>
 <div class="app">
   <h1>{{msg}}</h1>
   <Student />
   <School/>
 </div>
</template>

<script>
 import School from './components/School.vue';
 import Student from './components/Student.vue';


  export default {
     name:'App',
     components:{School,Student},

     data() {
      return {
        msg:'父组件',
        studentName:''
      }
     },
  }
</script>

<style scoped>
 .app{
  background-color: gray;
  padding: 5px;
 }
</style>

Stydent子组件 给 School 子组件 传递数据

Stydent子组件

<template>
  <div class="student">
      <h1>Student组件</h1>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>

      <!-- 第二步 创建事件 要发送的数据 -->
      <button @click="senName">发送学生名字</button>


  </div>
</template>

<script>
//第一步：引入 创建好的js文件
import bus from '../utlis/eventBus.js'

export default {
   name:'Student',
   data() {
    return {
        name:'张三',
        sex:'女'
    }
   },
   methods:{
    //第三步 发送数据给 eventBus.js  
    senName(){
      bus.$emit('name',this.name)
    },
    
    
   }
}
</script>

<style scoped>
   .student{
    background-color: pink;
    padding: 5px;
    margin-top: 30px;
   }
</style>

School 子组件

<template>
  <div class="school">
      <h1>School组件</h1>
       <h2>学校名称：{{name}}</h2>
       <h2>学校地址：{{address}}</h2>
       
       <!-- 第七步：使用数据 -->
       <h2>学生名字：{{studentName}}</h2>

  </div>
</template>

<script>
//第四步：引入 创建好的js文件
import bus from '../utlis/eventBus.js'

export default {
   name:'School',

   data(){
    return{
        name:'江西软件学校',
        address:'南昌',
        //第五步 ：转存数据
        studentName:''
    }
   },

   //第六步 从 eventBus.js 接收数据
   created(){
      //注意这 要与Student写名一样为 share
      //  接收数据 bus.$on、val   val是接收的数据
      bus.$on('name',val => {
      //  转存数据
      this.studentName = val
      })
   
}
}
</script>

<style scoped>
   .school{
    background-color: aqua;
    padding: 5px;
   }

</style>

页效果：

点击前：点击后：

子组件之间传值第二种方法：

1.在main.js 中添加事件

     //全局事件总线 第一步
     beforeCreate() {
         Vue.prototype.$bus = this;
     }

2. 数据传递：

① 用 this.$bus.$emit 进行数据传递

 this.$bus.$emit(自定义数据,传递的数据)

② 等接收完数据就要立马解绑

this.$bus.$off(自定义事件);

3. 数据接收：

① 用 this.$bus.$on 进行数据接收

this.$bus.$on(自定义事件,(data)=>{}

示例：

1.修改main.js文件

 //  该文件时整个项目的入口文件

 //   引入Vue
 import Vue from 'vue'
 //    引入App组件，是所有组件的父组件
 import App from './App.vue'





 Vue.config.productionTip = false

 new Vue({
     el: '#app',

     render: h => h(App),

     //全局事件总线 第一步
     beforeCreate() {
         Vue.prototype.$bus = this;
     }

 })

App引用：

<template>
 <div class="app">
   <h1>App</h1>

   <School/>
   <Student/>

 </div>
</template>

<script>
 import School from './components/School.vue';
 import Student from './components/Student.vue';

  export default {
     name:'App',
     components:{School,Student},

  }
</script>

<style scoped>
 .app{
  background-color: gray;
  padding: 5px;
 }
</style>

Stydent子组件 给 School 子组件 传递数据

Stydent子组件：

<template>
  <div class="student">
      <h1>Student</h1>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
       <!-- 第二步 创建点击事件 -->
      <button @click="sendStubentName">把学生名给School组件</button>
  </div>
</template>

<script>
export default {
   name:'Student',
   data() {
    return {
        name:'张三',
        sex:'女'
    }
   },
   methods:{

    //第三步提供数据 创建hello自定义事件 传输学生名字 
    sendStubentName(){
       this.$bus.$emit('hello',this.name)
    }
    },
   //第四步 等接收完数据就要立马解绑事件
    beforeDestroy(){
      this.$bus.$off('hello');
    }
}
</script>

<style scoped>
   .student{
    background-color: pink;
    padding: 5px;
    margin-top: 30px;
   }
</style>

School 子组件：

<template>
  <div class="school">
       <h1>school</h1>
       <h2>学校名称：{{name}}</h2>
       <h2>学校地址：{{address}}</h2>
       <!-- 第八步： 数据使用 -->
       <h2>学生名字：{{StudentName}}</h2>
  </div>
</template>

<script>
export default {
   name:'School',

   data(){
    return{
        name:'江西软件学校',
        address:'南昌',
        //第五步 ：转存数据
        StudentName:''
    }
   },
 
   // methods(){
   //    // 接收数据   第二种方式（2）
   //     demo(data);{
   //       console.log('我是school组件，收到了数据',data);
   //     }
   // },

   mounted(){
   //   console.log('school',this.$on)
   //第六步  接收数据  hello自定义事件名  接收的的数据
    //接收数 第一种方式写箭头函数 
   this.$bus.$on('hello',(data)=>{

      // 第七步 把接收的数据 赋值给 StudentName
      this.StudentName = data
   })
    //接收数据 第二种方式（1）
   // this.$bus.$on('hello',demo)
   }
}
</script>

<style scoped>
   .school{
    background-color: aqua;
    padding: 5px;
   }

</style>

页效果：

点击前： 点击后：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

cn33333

@cn33333

已为社区贡献1条内容