Vue 父子之间的传值

父传子

<div id="app">
    <son :title="title" :content="content"></son>
    <button>--父传子--</button>
</div>

<script>
    let vm = new Vue({
      el: "#app",
      data: {
        title: 70,
        content: '很是震撼'
      },
      methods: {

      },
      components: {
        son: {
          // props: ['title', 'content'],//能够这样经过props接受
          props: { //也能够校验类型
            title: {
              type: Number,
              // 子组件不写默认title 走default 的数据
              default: 789,
              required: true,
              validator(val) { //第一个参数：传递过来的值 校验data里的title 的值 > 10,不成立会警告
                return val > 10;
                console.log(val)
              }
            },
            content: {
              type: String,
              //必须值

            },
          },
          template: `
            <div>
              <h3>{{ title }}周年</h3>
              <span>{{ content }}</span>
            </div>
          `
        }
      },
    })
  </script>
复制代码

子传父

<div id="app">
    <!-- 数据放到对象里，能够这样获取，也能够经过 v-bind='childrenInfo' 直接获得这个对象 -->
    <!-- <my-son :title="childrenInfo.title" :content="childrenInfo.content"></my-son> -->
    <my-son v-bind='childrenInfo' @add='handleAdd'></my-son>
    父组件的number {{ childrenInfo.number }}
</div>

<script>
    let vm = new Vue({
      el: "#app",
      data: {
        childrenInfo: {
          title: '70周年',
          content: 20191001,
          number: 0,
          obj: {
            a: 1,
            b: 10
          }
        },
      },
      methods: {
        handleAdd(num) {
          this.childrenInfo.number += num;
        }
      },
      components: {
        mySon: {
          props: {
            title: {
              type: String,
              default: '很是震撼'
            },
            content: {
              type: Number,
              required: true,
              validator(val) {
                return val > 1000
                console.log('大于')
              }
            },
            number: {
              type: Number,
            },
            obj: {
              type: Object
            }
          },
          data() {
            return {
              /* 
                1.
                子组件经过$emit('add',10),把点击加10告诉父组件
                父组件经过参数num接受传递到过来的10，点击的时候加10，这样父子都会 +10 
                子组件经过props接受父组件的number的值，父组件更改子组件也会跟着更改
                2.
                子组件在本身的data中return{} 用 ownNumber 保存父组件的 number 的值，经过 template 显示出来 绑定点击事件
                点击的时候加1 先让 this.ownNumber++ 而后经过 this.$emit('add', this.ownNumber) 把加完的值传给父组件
                父组件用num接受子组件的值，让父组件的值=子组件点击改变的值 this.childrenInfo.number = num
              */
              ownNumber: this.number
            }
          },
          template: `
          <div>
            <h4>{{ title }}</h4>
            <div>{{ content }}</div>
            <div>子组件的number ：{{ number }}</div>
            <button @click="sonFn">-按钮-</button>
          </div>
          `,
          methods: {
            sonFn() {
              // $emit 第一个参数是出发事件的名称，后面的参数是传递过去的值
              // 父组件接受一个参数(num)就是子组件传递过去的this.number

              // this.ownNumber++
              // this.$emit('add', this.ownNumber)

              this.$emit('add', 10)
            }
          }
        }
      }
    })
  </script>
  
复制代码