第一种: props, 父页面给模板页传值, 页面加载后就会执行. 父页面:
- <!--App.vue-->
- <template>
- <div id="app">
- <Shop :sub="city"/>
- <!-- 可传多个值:<Shop :sub="[city,tab]" -->
- </div>
- </template>
- <script>
- import Shop from './components/shop';
- export default {
- components:{
- Shop
- },
- data(){
- return{
- city: ["北京", "上海", "广州", "香港"]
- }
- }
- }
- </script>
模板页:
- <!--shop.vue-->
- <template>
- <div class="shop">
- <div class="city"><span v-for="item in sub">{{item}}</span></div>
- </div>
- </template>
- <script>
- export default {
- props:['sub']
- }
- </script>
第二种: ref, 父页面给模板页传值, 需要事件响应. 父页面:
- <!--App.vue-->
- <template>
- <div id="app">
- <Shop ref="refA"/>
- <!-- 不支持多个 ref <Shop ref="refA" ref="refC"/> -->
- <div class="local" v-for="(item,index) in city">
- <span @click="refShow(index)">{{item}}</span>
- </div>
- </div>
- </template>
- <script>
- import Shop from './components/shop';
- export default {
- components:{
- Shop
- },
- data(){
- return{
- city: ["北京", "上海", "广州", "香港"]
- }
- },
- methods:{
- refShow(i){
- this.$refs.refA.refB(this.city);
- // 可传多个值: this.$refs.refA.refB([this.city,i]);
- }
- }
- }
- </script>
模板页:
- <!--shop.vue-->
- <template>
- <div class="shop">
- <div v-show="city.length"><span v-for="item in city">{{item}}</span></div>
- </div>
- </template>
- <script>
- export default {
- data(){
- return{
- city: []
- }
- },
- methods:{
- refB(i){
- this.city = i;
- }
- }
- }
- </script>
第三种: emit, 模板页传值给父页面, 需要事件响应. 模板页:
- <!--shop.vue-->
- <template>
- <div class="shop">
- <div class="city"><span v-for="(item,index) in citys" @click="emitDemo(index)">{{item}}</span>
- </div>
- </template>
- <script>
- export default {
- data(){
- return{
- city: ["北京", "上海", "广州", "香港"]
- }
- },
- methods:{
- emitDemo(i){
- this.$emit("emitA",i);
- // 可传多个值: this.$emit("emitA",[i,this.citys]);
- }
- }
- }
- </script>
父页面:
- <!--App.vue-->
- <template>
- <div id="app">
- <Shop @emitA="emitB"/>
- <!-- 多个也可以:<Shop @emitA="emitB" @emitC="emitD"/> -->
- <div v-show="cityIndex != -1"><span></span>{{cityIndex}}</div>
- </div>
- </template>
- <script>
- import Shop from './components/shop';
- export default {
- components:{
- Shop
- },
- data(){
- return{
- cityIndex:-1,
- }
- },
- methods:{
- emitB(i){
- this.cityIndex= i;
- }
- }
- }
- </script>
第四种, 通过路由传值, 父页面
- <!--App.vue-->
- <template>
- <div id="app">
- <router-link :to="{name:'index',params:{userName:author},query:{cityName:city}}"> 首页 </router-link>
- <!-- http://localhost:5006/#/?cityName=北京&cityName=上海&cityName=广州&cityName=香港--->
- </div>
- </template>
- <script>
- export default {
- data(){
- return{
- author:"marc",
- city: ["北京", "上海", "广州", "香港"]
- }
- }
- }
- </script>
子页
- <!--shop.vue-->
- <template>
- <div class="shop">
- <p>params 参数:<span>{{$route.params.userName}}</span></p>
- <p>query 参数:<span>{{$route.query.cityName}}</span></p>
- </div>
- </template>
第五种, vuex. 通过父页面 onload 或者事件响应传递参数, store 设置 state 值, 再在子页取 state 值.
父页面:
- <!--App.vue-->
- <template>
- <div id="app">
- <Shop/>
- <div class="city"><span v-for="(item,inex) in city" @click="transferItem(item)" :key="index">
- </div>
- </template>
- <script>
- import Shop from './components/shop';
- export default {
- components:{
- Shop
- },
- data(){
- return{
- city: ["北京", "上海", "广州", "香港"]
- }
- },
- methods:{
- transferItem(i){
- this.$store.commit('setCity',i);
- // 同样可以: this.$store.dispatch('setCity',i);
- }
- }
- }
- </script>
- store>> index.js
- <!-- store>> index.js -->
- const store = new Vuex.Store({
- state: {
- city: ""
- },
- getters: {
- city: state => state.city
- },
- mutations: {
- setCity(state, flag) {
- state.city = flag
- }
- },
- actions: {
- /* 同样可以:
- setCity({
- state,
- commit,
- dispatch
- }, hash) {
- state.city = hash;
- }*/
- }
- })
- export default store
子页:
- <!--shop.vue-->
- <template>
- <div class="shop">
- <div class="city">{{city}}</div>
- </div>
- </template>
- <script>
- import {mapState,mapGetters} from "vuex"
- export default{
- computed:{
- ...mapState(['city']),
- // 同样可以: ...mapGetters(['city'])
- }
- }
- </script>
如果有幸帮到你, 帮忙到个人主页 Star 一下 : https://github.com/mark-tang
听说 Star 的人马上升职加薪! Skr - skr!
来源: http://www.qdfuns.com/article/25669/c6844fb33f37f727561f6ade1f484f58.html