VUE传值的方法总结

最新推荐文章于 2024-05-17 14:32:46 发布

ᝰꫀꪶꪖρડ꧖ꦿ373

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量323

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_71280597/article/details/129006548

版权

1、父子通信

父像子传递

（1）父组件中，在子组件的标签上挂载要传输的变量。

（2）子组件中通过prop来接受定义的数据，props可以是数组，也可以是对象格式。vue的书写指南中，更加推荐对象写法。

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son :data='name'></son> 
  </div>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>

//子组件
<template>
  <div>{{data}}</div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  props:["data"],
  // 或者是对象写法
  prop:{
    data:{
    type:String, // type:限制传输来的数据类型。
    }
  }
};
</script>

子像父传值

（1）、在父组件中的子组件标签上，自定义一个事件。在methods中声明此方法。

（2）、子组件的方法通过this.$emit(‘事件’, 需要传递的参数 )

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </div>
</template>

<script>
import son from "./son.vue"; //导入子组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(val){
      alert('子传父')
       console.log(val,'子组件像父组件传递的数据')
    }
  },
};
</script>

//子组件
<template>
  <div>
    <button @click="lcalter">点我</button>
  </div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  methods: {
    lcalter(){
      this.$emit('lcclick')//通过emit来触发事件
    }
  },
};
</script>

2、兄弟组件之间通信

Bus总栈

（1）、在utils 中或者 src 中创建 bus 文件夹，然后放入一个 bus.js文件导出一个空的 Vue 实力。

（2)、在传输数据的一方，引入bus.js文件夹。然后通过 Bus.$emit('事件名称',,需要携带的数据)来派发事件。

（3）、在接收数据的一方，引入Bus.js文件，选择合适的地方，调用Bus.$on('派发的事件名称',data => {（data是这个派发事件的名称，花括号内写后续逻辑）})。

3、refs通信

（1）、ref在普通的DOM元素中使用，引用指向的是DOM元素。如果用在组件身上指向的组件的实例。

（2）、可以通过实例直接调用组件方法或者访问数据，也算是父子组件传值的一种。

（3）、缺点：vue是单向数据流自上而下，并且如果需要子组件修改父组件的数据时，都是通过$emit()。触发自定义事件，在父组件中进行修改数据。使用ref可以直接从子组件中去修改父组件的数据。要尽量避免此类操作，可能会造成数据流混乱的现象。

4、Vuex通信

（1）、组件通过dispatch到 actions，actions 是异步操作。

（2）、在actions 中通过commit到mutations，mutations 再通过逻辑的处理修改state 中的数据。从而达到更新数据的状态。

（3）、如果使用vuex 这是必须要遵守的流程。可以不使用actions 但是想要更改state中的数据，只能通过mutations来进行更改。

//父组件
template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>
<script>
  import ChildA from './ChildA' // 导入A组件
  import ChildB from './ChildB' // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>

//子组件A
<template>
 <div id="childA">
   <h1>我是A组件</h1>
   <button @click="transform">点我让B组件接收到数据</button>
   <p>因为点了B，所以信息发生了变化：{{BMessage}}</p>
 </div>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: 'Hello，B组件，我是A组件'
     }
   },
   computed: {
     BMessage() {
       // 这里存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg，将A组件的数据存放到store里去
       this.$store.commit('receiveAMsg', {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>

//子组件B
<template>
 <div id="childB">
   <h1>我是B组件</h1>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A，我的信息发生了变化：{{AMessage}}</p>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: 'Hello，A组件，我是B组件'
     }
   },
   computed: {
     AMessage() {
       // 这里存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg，将B组件的数据存放到store里去
       this.$store.commit('receiveBMsg', {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>

//vuex
import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   AMsg: '',
   BMsg: ''
 }
 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })

5、$parent

通过parent可以获取父组件的实例，然后通过这个实例就可以访问父组件的数据和方法，他还有一个兄弟，$root，可以获取根组件的实例。

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

//在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。

// 使用$root方法时语法不变。

6、通过本地存储进行传值

sessionStorage，localStorage。他们是浏览器的全局对象，根据其特性可以应用在很多场景，并且我们也可以根据这个特性去多个页面共享这一个数据。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 只能存入字符串，需要存入复杂数据类型时，需要序列化的操作，取出时反序列化。即可

7、路由传值

在路由跳转时，我们可以将需要携带的参数拼接过去。query和params方法都可以做传参使用。



<script>
    trigger() {
      this.$router.push({
        path:'', // 路径
        query:{id:1}  // 使用query方法路由跳转传参
      })
    }
</script>

9、祖孙传值

$attrs

正常情况下，我们需要使用props 过渡。但这样代码的复杂度提升，同时不相关的组件会增添不相关的属性。借助$attrs这些问题就都迎刃而解了。并且都只需要提取自己需要用到的即可。

祖组件：

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from './Parent'
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

父组件：

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from './Children'

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:['name'],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

孙组件:

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:['sex','age','hobby','name'],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit('sayKnow','我知道啦')
      }
    },
    mounted() {
    }
  }
</script>

孙祖传值使用$listeners 方法同上。

子组件：

<template>
  <div>
    <button @click="setMsg">点击传给祖父</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  methods: {
    setMsg() {
      this.$emit('eventOne', '123')
    }
  }
}
</script>

父组件：

<template>
  <div>
    <children-two v-on="$listeners"></children-two>
  </div>
</template>

<script>
import ChildrenTwo from './childrenTwo.vue'

export default {
  name: 'childrenOne',
  components: {
    ChildrenTwo
  }
}
</script>

祖组件：

<template>
  <div id="app">
    <children-one @eventOne="eventOne"></children-one>
    {{ msg }}
  </div>
</template>
<script>
import ChildrenOne from '../src/components/children.vue'
export default {
  name: 'App',
  components: {
    ChildrenOne,
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    eventOne(value) {
      this.msg = value
    }
  }
}
</script>