vue组件传值有哪些？

1：父子组件传值：

操作流程：

在父组件内的子组件上绑定一个自定义属性和变量；

<template>
    <div class="parent">
        <!-- 父组件 -->
        <List :parents="flag"></List>
    </div>
</template>
<script>
//引入组件
import List from '@/components/List.vue'
export default {
   
    name:'Parent',
    components:{
   List},//注册子组件
    data(){
   
        return{
   
            flag:12// 先给父组件的属性赋值一个默认值
        }
    }
}
</script>

在子组件内需要用props接收参数，然而接收参数的类型可写为：

props:["parents"];//数组类型
props:{
   "parents": Number};//对象形式声明当前传的值和类型

最后在dom内用差值表达式进行渲染数据：

<template>
   <div class="list">
       <!-- 子组件 -->
        <p>{
   {
   parents}}</p>
   </div>
</template>

2：eventBus/(兄弟组件)传值：

介绍：

eventBus又称为”事件总线"，它是一种沟通的桥梁。桥梁的两端通过事件总线可以进行交互，传播数据。

操作流程：

• 首先，我们需要在当前项目src文件下创建一个Bus.js文件，导出一个空实例；

import Vue from "vue"
export default new Vue({
   });

• 然后，在传输的一方，导入Bus.js文件，在当前组件的方法中用Bus.$emit(“传递连通方法名”,参数)进行传参；

<template>
    <div class="elderBrother">
        <button @click="transmit">传输</button>
    </div>
</template>

<script>
//传输方引入Bus.js
import Bus from '../Bus'
export default {
   
    name:'ElderBrother',
    data(){
   
        return{
   
            name:"张三" //声明name赋值为一个随便的名称
        }
    },
    methods:{
   
        transmit(){
   
            Bus.$emit("connect",this.name)
            console.log(this.name);//传输的参数
        }
    }
}
</script>

• 再然后，在接收的一方，导入Bus.js文件，在当前组件的方法中用Bus.$on(“传递联通的方法名”，(data)=>{//回调返回的参数信息})

<template>
    <div class="littleBrother">
        <span>{
   {
   value}}</span>
    </div>
</template>

<script>
//接收方引入Bus.js
import Bus from '../Bus'
export default {
   
    name:'LittleBrother',
    data(){
   
        return{
   
            value:''
        }
    },
    mounted(){
   
        Bus.$on("connect",(data)=>{
   
            console.log(data);
            this.value = data; //赋值传输的数据
        })
    }
}
</script>

• 最后需要我们在dom内渲染传输的数据即可。

3：子传父组件传值:

操作流程：

• 首先在父组件中把子组件导入进去并注册；
• 在子组件写一个点击触发事件，和需要传递的值，在事件方法上以this.$emit(“传递方法”，需要传的值)；

<template>
    <div class="person">
        <!-- 子组件区域 -->
        <button @click="like">子传事件</button>
    </div>
</template>

<script>
export default {
   
    name:'Person',
    data(){
   
        return{
   
            title:"李四"
        }
    },
    methods:{
   
        like(){
   
            // this.title 是子组件传输的值
            this.$emit("pass",this.title)
            console.log(this.title);
        }
    }
}
</script>

• 在父组件上的子组件标签上需要定义一个子组件传递的方法和事件名，把子组件传的值当作父组件事件的实参，进行渲染；

<template>
    <div class="parent">
        <!-- 父组件区域 -->
        <p>{
   {
   name}}</p>
        <Person @pass="submit"></Person>
    </div>
</template>

<script>
import Person from '@/views/Person.vue'
export default {
   
    name:'Parent',
    components:{
   Person},
    props:[],
    data(){
   
        return{
   
            // 先给父组件的属性赋值一个默认值为空
            name:"",
        }
    },
    methods:{
   
        submit(data){
   
            this.name = data;
            console.log(this.name);
        }
    }
}
</script>

4：localStorage传值：

介绍：

localStorage 它是持久化的本地储存，除了我们手动删除，否则存入后依然存在；

操作流程：

• 首先用JSON.stringify 就是把对象的类型转换为字符串类型 ，利用setItem()设置一个指针，存入到localStorage中：

<template>
    <div class="first">
        <!-- 组件一 -->
        <button @click="submit">提交数据</button>
    </div>
</template>

<script>
export default {
   
    name:'One',
    data(){
   
        return{
   
            list:[
                {
   "id":10,"name":"张三","age":18,"height":1.8},
                {
   "id":11,"name":"李四","age":28,"height":1.5},
                {
   "id":12,"name":"马武","age":38,"height":1.2},
                {
   "id":13,"name":"黑旋风","age":