vue2.0传值问题
一.建立vue-cli脚手架
指令 npm install webpack -g
npm install vue-cli -g
vue init webpack vuetex1
npm install
npm run dev
npm run build 打包项目
二.路由跳转页面传参
1 routes: [ 2 { 3 path: '/', 4 name: 'HelloWorld', 5 component: HelloWorld 6 }, 7 { 8 // <router-link :to="{ name: 'He2', params: { user:text }}">User</router-link> 9 path: '/Hello1', 10 name: 'Hello1', 11 component: Hello1 12 }, 13 { 14 //<router-link :to="{name:'He3',params:{ tex:he3}}">我要向He3页面传值</router-link> 15 // Hello1页面传过来的user参数, 16 //在He2页面里用{{ $route.params.user }}接收参数 17 path: '/He2/:user', 18 name: 'He2', 19 component: He2 20 }, 21 { 22 // 在He3页面里用{{ $route.params.user }}接收参数 23 // He2页面传过来的tex参数, 24 //在He3页面里用{{ $route.params.tex }}接收参数 25 path: '/He3/:tex', 26 name: 'He3', 27 component: He3 28 }, 29 { 30 //在其他页面 <router-link to="/params/198/jspang ">URL 传参</router-link> 31 //用<p>新闻ID:{{ $route.params.newsId}}</p> 32 //< p > 新闻标题:{{ $route.params.newsTitle }}</p>接受参数 33 path: '/params/:newsId/:newsTitle', 34 name: 'params', 35 component: Params, 36 //路由钩子函数 37 beforeEnter: (to, from, next) => { 38 console.log('我进入了params模板'); 39 console.log(to); 40 console.log(from); 41 next();//路由的控制参数常用的有next(true)和next(false) 42 } 43 } 44 ]
二.组件的应用
1.全局注册组件
在main.js里添加以下内容
Vue.component("runoob", { template: "<div><h1>自定义组件!</h1><p>这是自定义全局组件</p></div>" }); /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })
在任何页面应用就可以了,例如在App.vue页面里
<runoob></runoob>
自定义局部组件
在要用得到的页面里注册局部组件,只供当前页面使用
export default { name: "hello1", data() { return { msg: "Hi, I am Zyt", text: "Hi, I am 页面传值" }; }, components: { panda: { template: '<div style="color:red;">Panda from {{ here }} </div>', props: ["here"] } } };
2.组件之间的通信
用props从父组件向子组件传值
1 //Parent.vue 2 <template> 3 <div class="Parent"> 4 <Children01 :child01='msgP'></Children01> 5 </div> 6 </template> 7 8 <script> 9 import Children01 from "@/components/Children01"; 10 export default { 11 name: "Parent", 12 data() { 13 return { 14 msgP: "我是父组件的信息,向Children01组件传值" 15 }; 16 }, 17 components: { 18 Children01 19 } 20 }; 21 </script> 22 <style scoped> 23 24 </style>
//Children01.vue <template> <div class="Children01"> {{ msg }} <p>{{ child01 }}</p> </div> </template> <script> export default { name: "Children01", props: ["child01"], data() { return { msg: "我是Children01组件" }; } }; </script> <style scoped> .Children01 { width: 300px; border: 1px solid red; } </style>
用props从子组件向父组件传值
1 //Parent.vue 2 <template> 3 <div class="Parent"> 4 <Children01 @toParentClick="acceptChildMess"></Children01> 5 </div> 6 </template> 7 8 <script> 9 import Children01 from "@/components/Children01"; 10 export default { 11 name: "Parent", 12 data() { 13 return {}; 14 }, 15 components: { 16 Children01 17 }, 18 methods: { 19 acceptChildMess(propm) { 20 console.log(propm); 21 return propm; 22 } 23 } 24 }; 25 </script> 26 <style scoped> 27 28 </style>
//children01.vue <template> <div class="Children01"> <!-- {{ msg }} <p>{{ child01 }}</p> --> <button @click="toParen">向父组件传值</button> </div> </template> <script> export default { name: "Children01", props: ["child01"], data() { return { msg: "我是Children01组件" }; }, methods: { toParen() { this.$emit("toParentClick", "我是Children01组件,向父组件传值"); } } }; </script> <style scoped> .Children01 { width: 300px; border: 1px solid red; } </style>
用props兄弟组件间传值,主要思想是children01先向Parent传值,然后Parent再向Children02传值
//Parent.vue <template> <div class="Parent"> <Children01 @toParentClick="acceptChildMess"></Children01> <Children02 :child02='msgP2'></Children02> </div> </template> <script> import Children01 from "@/components/Children01"; import Children02 from "@/components/Children02"; export default { name: "Parent", data() { return { msgP: "我是父组件的信息,向Children01组件传值", msgP2: "" }; }, components: { Children01, Children02 }, methods: { acceptChildMess(propm) { console.log(propm); this.msgP2 = propm; } } }; </script> <style scoped> .Parent { width: 300px; height: 180px; border: 1px solid yellow; } </style>
//Children01.vue <template> <div class="Children01"> {{ msg }} <p>{{ child01 }}</p> <button @click="toParen">点击向父组件传值,然后向Children02组件传值</button> </div> </template> <script> export default { name: "Children01", props: ["child01"], data() { return { msg: "我是Children01组件" }; }, methods: { toParen() { this.$emit("toParentClick", "我是Children01组件,向父组件传值,然后向Children02组件传值"); } } }; </script> <style scoped> .Children01 { width: 300px; border: 1px solid red; } </style>
//Children02.vue <template> <div class="Children02"> {{ msg }} <p>{{ child02 }}</p> </div> </template> <script> export default { name: "Children02", props: ["child02"], data() { return { msg: "我是Children02组件" }; } }; </script> <style scoped> .Children02 { border: 1px solid blue; } </style>