vue跨页面调用与传参

2019独角兽企业重金招聘Python工程师标准>>>

主页面包含区域设置

<router-view @my-event="getMyEvent" ref="childrenmode" ></router-view>

其中 @my-event="getMyEvent" 用来给子页面调用的

子页面调用方法

this.$emit('my-event','refresh');
//其中 refresh 是参数

父页面接收,其中id 对应参数 refresh,可多个，按顺序输入输出参数

......
    getMyEvent: function(id) {
      this.upstate(id)
    },
......

 

父页面调用子页面方法

 this.$refs.childrenmode.loadselect();

其中子页面需要有 loadselect 方法,否则会报错，需要注意的是，这个子页面必须是已经加载好的。

prop和$ref之间的区别：

• prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
• $ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

prop使用样例

子

<template>
  <div>
    <h1>不中转直接绑定：{{ msg }}</h1>

    <h1>中转一下绑定：{{ my_msg }}</h1>
  </div>
</template>

<script>
export default {
  name:'my_test_child',
  data() {
    return {
      my_msg:''
    };
  },
  props:{
    msg:{
          type: String,
          default: '未初始化',
        }
  },
  watch:{
    // msg(val){
    //   console.log('监视刷新数据');
    //   this.my_msg=val;
    // }
  },
  methods: {
    refresh_data:function(){
        console.log('#ref 主动刷新数据');
        this.my_msg=this.msg;
      }
  }
};
</script>

父

<template>
  <div>
    <div>父传子 测试</div>
    <input
      type="text"
      v-model="tm"
      @change="myrefresh"
    >
    <mychild
      ref="child"
      :msg="tm"
    />
  </div>
</template>
 
<script >
import children from './personmode/children.vue';
export default {
  components:{
        'mychild':children
  },
  data() {
    return {
      tm:''
    };
  },
  methods: {
    myrefresh:function(){
      console.log('变化');
      this.$refs.child.refresh_data();
    }
  }
};
</script>
 
<style lang="scss" scoped>
</style>

 

转载于:https://my.oschina.net/qingqingdego/blog/3012376