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>
  
複製代碼