VUE—父子路由传值、改值、调用方法。。。。

VUE—父子路由传值并改值(控制显示隐藏)

  • 一:父传子,事件派发,子调用父方法

父路由

     // 组件
    data () {
      return {
        isShow: false
      }
    },
    methods: {
      toggle () { // 父组件写了一个方法,子组件来调用
        this.isShow = true 
      }
    },

子路由


methods: {
      changed () {
        this.$emit('changedFn', true) // 事件派发:参数一:事件名 参数二:传递的值(可不写)
      }
    }
  • 二:父传子,子改值,父同步

父路由

  
// .sync是同步的意思,是用来子路由修改父路由传过来的值,父路由也同步修改
// 子路由定义了一个subIsShow参数来接受父路由isShow传递的值
data () {
      return {
        isShow: false
      }
    },

子路由


props: { // 子路由在changed方法里定义了subIsShow用来接收父路由传过来的isShow的值
      subIsShow: {
        type: Boolean, // 做类型判断
        default: false // 默认为false
      }
    },
    computed: { // subIsShow用来接收父路由isShow传过来的值,但是不能直接操作,所以用val进行接收并操作
      val: function () {
        return this.subIsShow // 把subIsShow的值给val
      }
    },
methods: {
      changed () {
        this.$emit('update:subIsShow', !this.val) // 把val的值更新给subIsShow,这时因为subIsShow和isShow同步,所以父路由的isShow也进行了更新
      }
    },
  • 三:父传子

父路由

    
    data () {
      return {
        text: '123456'
      }
    },

子路由

 
props: {
      subText: {
        type: String,
        default: ''
      }
    },
  • 四:父调用子方法/属性也可以
    子路由
 methods: {
      test () { // 父组件调用子组件的方法
        alert('我是子组件的方法')
      }
    }

父路由


 // 子组件 利用ref获取节点
methods: {
      testFn () {
        this.$refs.list.test() // 利用ref调用子组件中的方法
      }
    }

你可能感兴趣的:(VUE)