<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. vue怎么修改父組件值-今日快訊

          來源:php中文網 | 2022-12-30 15:05:53 |

          本教程操作環境:Windows10系統、Vue 3版、Dell G3電腦。

          vue怎么修改父組件值?

          vue中子組件更改父組件數據


          (資料圖片僅供參考)

          因為vue是單項數據流,所以沒辦法直接在子組件中去修改父組件里面的數據,vue提倡單項數據流,為了防止項目過于復雜時,導致數據流難以理解。引用Vue的官網的話:父系 prop 的更新會向下流動到子組件中,但是反過來則不行。這樣會防止從子組件意外改變父及組件的狀態,從而導致你的應用的數據流向難以理解。所以在項目開發過程中,我們總是通過子組件觸發父組件中方法的方式,通過父組件的方法,更改父組件的數據。

          一、props傳遞方法

          通過props的方式,將父組件的方法傳遞到子組件,在子組件中通過props接收,可以在當前組件的實例上直接觸發父組件的方法,從而實現子組件更改父組件的值。同事也可以將子組件的數據,以參數的形式發送給父組件。

          由于代碼不多,就暫且全部展示,僅需關心相關事件就可以

          //父組件,設置更改自己數據的方法,將該方法傳遞給子組件<template>  <div>    <h1>我是父組件</h1>    <HelloWorld :msg="msg" :changeMsg="changeMsg"/>  </div></template> <script>import HelloWorld from "@/components/HelloWorld.vue" export default {  name: "Home",  components: {    HelloWorld  },  methods:{    changeMsg(text,num){      console.log(text,num);      this.msg=this.msg+1    }  },  data(){    return{      msg:1    }  }}</script>   //子組件,接收父組件傳遞過來的方法,通過props接收到的方法和數據,在組件實例上可以直接獲取和觸發<template>  <div>    <h1>我是子組件<button @click="changeFatherData">點我更改父組件數據</button></h1>    <h1>父組件數據:{{msg}}</h1>      </div></template> <script>export default {  name: "HelloWorld",  props: {    msg: Number,    changeMsg:Function  },  data(){    return{      text:"我是子組件數據,我要發送給父組件",      num:12    }  },  methods:{    changeFatherData(){      this.changeMsg(this.text,this.num)    }  },}</script> <style scoped> </style>

          二、通過this.$emit觸發父組件方法實現

          在父組件中自定義一個方法,然后傳遞給子組件,子組件通過this.$emit直接觸發父組件中的數據,實現父子組件通信。子組件觸發事件,父組件監聽事件。

          //父組件,將定義的方法傳遞給子元素<template>  <div>    <h1>我是父組件</h1>    <HelloWorld :msg="msg" @changeMsg="changeMsg"/>  </div></template> <script>import HelloWorld from "@/components/HelloWorld.vue" export default {  name: "Home",  components: {    HelloWorld  },  methods:{    changeMsg(text,num){      console.log(text,num);      this.msg=this.msg+1    }  },  data(){    return{      msg:1    }  }}</script>  //子組件,通過this.$emit觸發父組件方法,更改父組件數據,同時可以進行數據傳值<template>  <div>    <h1>我是子組件<button @click="changeFatherData">點我更改父組件數據</button></h1>    <h1>父組件數據:{{msg}}</h1>      </div></template> <script>export default {  name: "HelloWorld",  props: {    msg: Number,  },  data(){    return{      text:"我是子組件數據,我要發送給父組件",      num:12    }  },  methods:{    changeFatherData(){      this.$emit("changeMsg",this.text,this.num)    }  },}</script> <style scoped> </style>

          三、子組件通過this.$parent直接觸發父組件(代碼簡潔,推薦使用)

          子組件直接觸發父組件事件,無需進行方法的傳遞、接收,以及事件的定義。

          //父組件,聲明需要的方法<template>  <div>    <h1>我是父組件</h1>    <HelloWorld :msg="msg"/>  </div></template> <script>import HelloWorld from "@/components/HelloWorld.vue" export default {  name: "Home",  components: {    HelloWorld  },  methods:{    changeMsg(text,num){      console.log(text,num);      this.msg=this.msg+1    }  },  data(){    return{      msg:1    }  }}</script>  //子組件,this.$parent直接觸發父組件方法<template>  <div>    <h1>我是子組件<button @click="changeFatherData">點我更改父組件數據</button></h1>    <h1>父組件數據:{{msg}}</h1>      </div></template> <script>export default {  name: "HelloWorld",  props: {    msg: Number,  },  data(){    return{      text:"我是子組件數據,我要發送給父組件",      num:12    }  },  methods:{    changeFatherData(){      this.$parent.changeMsg(this.text,this.num)    }  },}</script> <style scoped> </style>

          推薦學習:《vue.js視頻教程》

          以上就是vue怎么修改父組件值的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞:

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>