详解Vue的七种传值方式
1,父传子
子组件中定义PRops
字段,类型为数组(如果需要限制字段值类型,也可以定义为对象的形式)。如下图的例子,父组件挂载子组件HelloWorld
,在组件标签上给tITle
赋值,子组件HelloWorld
定义props
,里面有一个值是title
,这样子组件就可以使用父组件的值了。
父组件
template> div> HelloWorld :title="msg" /> /div> /template> script> import HelloWorld From "../components/HelloWorld.vue"; export default { name: "Home", data() { return { msg: "搜索音乐", } ; } , components: { HelloWorld, } ,} ; /script>
子组件
template> div class="hello"> h1> { { title } } /h1> /div> /template> script> export default { name: "HelloWorld", props:["title"], data() { return { } ; } ,} ; /script>
2,子传父
子传父,需要在子组件中触发一个事件,在事件中,调用$emit('父组件的方法名', '传递的值')
,然后在父组件中,通过自定义事件接收传递过来的值。
子组件
template> div class="hello"> h1 @click="add"> { { title } } /h1> /div> /template> script> export default { name: "HelloWorld", props: ["title"], data() { return { age:18 } ; } , methods: { add(){ this.$emit("childEvent", this.age); } } ,} ; /script>
父组件
template> div> HelloWorld @childEvent="parentEvent" :title="msg" /> /div> /template> script> import HelloWorld from "../components/HelloWorld.vue"; export default { name: "Home", data() { return { msg: "搜索音乐", } ; } , methods: { parentEvent(e) { console.LOG(e); } , } , components: { HelloWorld, } ,} ; /script>
3,兄弟组件传值
1,先新建一个bus.js
文件,在bus.js
里new
一个Vue
实例,充当传输数据的中间层。
import Vue from 'vue'; export default new Vue;
2,在组件A中引入bus.js
,通过bus.$emit('事件名','参数')
传递参数
template> div class="hello"> h1 @click="add"> { { title } } /h1> /div> /template> script> import bus from "../publiCFn/bus.js"; export default { name: "HelloWorld", props: ["title"], data() { return { age:18 } ; } , methods: { add(){ bus.$emit("childEvent", this.age); } } ,} ; /script>
3,在B组件mounted
周期中使用$on('事件名', function(){
}
)
接收
template> div id='swiPEr'> button> 我是按钮/button> /div> /template> script> import bus from "../publicFn/bus.js"; export default { name:'Swiper', data (){ return { } } , mounted(){ bus.$on("childEvent", (e) => { console.log(e) } ) } } /script>
4,父组件使用子组件的数据和方法
1,在子组件标签上写上ref
属性
2,父组件通过this.$refs.id.方法名
或者this.$refs.id.属性名
的方式可以访问子组件。
父组件
template> div> HelloWorld :title="msg" ref="hello" /> button @click="parentEvent"> 我是父亲/button> /div> /template> script> import HelloWorld from "../components/HelloWorld.vue"; export default { name: "Home", data() { return { msg: "搜索音乐", } ; } , methods: { parentEvent() { this.$refs.hello.add(); console.log(this.$refs.hello.age); } , } , components: { HelloWorld } ,} ; /script>
子组件
template> div class="hello"> h1> { { title } } /h1> /div> /template> script> export default { name: "HelloWorld", props: ["title"], data() { return { age:18 } ; } , methods: { add(){ console.log("我是子组件"); } } ,} ; /script>
5,子组件使用父组件的数据和方法
在子组件中,可以使用$parent
访问其上级父组件的数据和方法,如果是多重嵌套,也可以使用多层$parent
。
父组件
template> div> HelloWorld :title="msg" ref="hello" /> /div> /template> script> import HelloWorld from "../components/HelloWorld.vue"; export default { name: "Home", data() { return { msg: "搜索音乐", } ; } , methods: { parentEvent() { console.log("我是父组件的方法"); } , } , components: { HelloWorld } ,} ; /script>
子组件
template> div class="hello"> h1 @click="add"> { { title } } /h1> /div> /template> script> export default { name: "HelloWorld", props: ["title"], data() { return { age:18 } ; } , methods: { add(){ console.log(this.$parent.msg) this.$parent.parentEvent(); } } ,} ; /script>
6,Vuex传值
Vuex
是一个专为 Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。一般小项目不需要用到。
6.1,定义Store
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { school: "清华大学", a:"nice" } , getters: { returnVal(state) { return state.school + state.a; } , } , mutations: { changeSchool(state, val) { state.school = val; console.log('修改成功'); } , } , actions: { } , modules: { } } );
6.2,挂载
import Vue from 'vue'; import App from './App.vue'; import router from "./router"; import store from "./store"; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; import publicFn from "./publicFn/publicFn"; Vue.config.productionTip = falseconst url = process.env.VUE_APP_URL; Vue.prototype.$url = url; Vue.prototype.$publicFn = publicFn; Vue.use(ElementUI); new Vue({ router, store, render: h => h(App),} ).$mount('#app')
6.3,使用
template> div class="hello"> h1 @click="add"> { { title } } /h1> /div> /template> script> export default { name: "HelloWorld", props: ["title"], data() { return { age:18 } ; } , methods: { add(){ console.log(this.$store.state.school); //获取值 //this.$store.COMmit('changeSchool', '北京大学'); //修改值 // console.log(this.$store.getters.returnVal)//获取过滤后的值 } } ,} ; /script>
7,路由传值
7.1 通过query传值
注意:该方式刷新页面参数不丢失,并且会在地址栏后将参数显露,http://localhost:9000/#/conter?id=10086&
name=%E9%B9%8F%E5%A4%9A%E5%A4%9A
页面A
template> div> HelloWorld :title="msg" ref="hello" /> button @click="parentEvent"> 跳转/button> /div> /template> script> import HelloWorld from "../components/HelloWorld.vue"; export default { name: "Home", data() { return { msg: "搜索音乐", } ; } , methods: { parentEvent() { this.$router.push({ path:"/conter", name:'conter', query:{ id:10086, name:"鹏多多" } } ) } , } , components: { HelloWorld } ,} ; /script>
页面B
template> div id='conter'> /div> /template> script> export default { name:'conter', data (){ return { } } , created (){ console.log(this.$route.query.id, this.$route.query.name); } ,} /script>
7.2 通过params传值
注意:该方式刷新页面参数会丢失,可以接收后存在sessionStorage
。
A页面
template> div> HelloWorld :title="msg" ref="hello" /> button @click="parentEvent"> 跳转/button> /div> /template> script> import HelloWorld from "../components/HelloWorld.vue"; export default { name: "Home", data() { return { msg: "搜索音乐", } ; } , methods: { parentEvent() { this.$router.push({ path:"/conter", name:"conter", params:{ id:10086, name:"鹏多多" } } ) } , } , components: { HelloWorld } ,} ; /script>
B页面
template> div id='conter'> /div> /template> script> export default { name:'conter', data (){ return { } } , created (){ console.log(this.$route.params.id, this.$route.params.name); } ,} /script>
到此这篇关于Vue的七种传值方式的文章就介绍到这了,更多相关Vue传值方式内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:- 浅谈Vue3 父子传值
- vue父子组件传值以及单向数据流问题详解
- vue父子组件的互相传值和调用
- Vue父子组件传值的一些坑
- vue 子组件和父组件传值的示例
- vue父子传值,兄弟传值,子父传值详解
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 详解Vue的七种传值方式
本文地址: https://pptw.com/jishu/594478.html