vue 元件間傳值方式

vue 不同元件間傳值方式

1 父傳子

2 子傳父

3 非父子傳值

1.父元件向子元件進行傳值(

父傳子

)

父元件：

<div>
  <input type="text" v-model="name">
  <!-- 引入子元件 -->
  <child :inputName="name"></child>
</div>
           

<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>
           

子元件：

<div>
  <span>{{inputName}}</span>
</div>
           

<script>
  export default {
    // 接受父元件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>
           

2.子元件向父元件傳值（

子傳父

）

子元件：

<div>
  <span>{{childValue}}</span>
  <!-- 定義一個子元件傳值的方法 -->
  <input type="button" value="點選觸發" @click="childClick">
</div>
           

<script>
  export default {
    data () {
      return {
        childValue: '我是子元件的資料'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父元件on監聽的方法
        // 第二個參數this.childValue是需要傳的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>
           

父元件：

<div>
  <span>{{name}}</span>
  <!-- 引入子元件 定義一個on的方法監聽子元件的狀态-->
  <child @childByValue="childByValue"></child>
</div>
           

<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue(childValue) {
        // childValue就是子元件傳過來的值
        this.name = childValue
      }
    }
  }
</script>
           

3.非父子元件進行傳值（

非父子

）

非父子元件之間傳值，需要定義個公共的公共執行個體檔案

common.js

，作為中間倉庫來傳值，不然元件之間達不到傳值的效果。

公共common.js

//common.js
import Vue from 'vue'
export default new Vue()
           

元件A：

<div>
  A元件:
  <span>{{elementValue}}</span>
  <input type="button" value="點選觸發" @click="elementByValue">
</div>
           

<script>
  // 引入公共的common，來做為中間傳達的工具
  import common from './common.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue() {
        common.$emit('val', this.elementValue)
      }
    }
  }
</script>
           

元件B：

<div>
  B元件:
  <input type="button" value="點選觸發" @click="getData">
  <span>{{name}}</span>
</div>
           

<script>
  import common from './common.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted() {
      var vm = this
      // 用$on事件來接收參數
      common.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData() {
        this.name++
      }
    }
  }
</script>
           

我的

個人部落格

有空來坐坐

https://www.wangyanan.online