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

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

• 一：父传子，事件派发，子调用父方法

父路由

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

子路由

<input @click="changed" readonly type="text">
methods: {
      changed () {
        this.$emit('changedFn', true) // 事件派发：参数一：事件名 参数二：传递的值（可不写）
      }
    }

• 二：父传子，子改值，父同步

父路由

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

子路由

<input @click="changed" readonly type="text">
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也进行了更新
      }
    },

• 三：父传子

父路由

    <Input :subText="text"></Input>
    data () {
      return {
        text: '123456'
      }
    },

子路由

 <input v-model="subText" type="text">
props: {
      subText: {
        type: String,
        default: ''
      }
    },

• 四：父调用子方法/属性也可以
  子路由

 methods: {
      test () { // 父组件调用子组件的方法
        alert('我是子组件的方法')
      }
    }

父路由

<button @click="testFn">我是父组件的按钮</button>
<List ref="list" ></List> // 子组件 利用ref获取节点
methods: {
      testFn () {
        this.$refs.list.test() // 利用ref调用子组件中的方法
      }
    }