1、首先是如何給你定義的變數拿到資料：

這裡我自己用的是vuex：

首先在你專案的src資料夾下建立這麼一個目錄：

之後就要在index.js中將homedatas.js（拿資料的js）共享出去，使頁面能拿到資料，

以下是index.js的程式碼：

隨後就是在homedatas中獲取資料了，以下是homedatas.js程式碼：

以上就是獲取資料的步驟，之後就是在頁面中拿到這個獲取到的資料：

首當其衝不可少的就是引用，引用vuex和引用元件：

之後在頁面的jascript中的export default中定義元件，獲取資料：

用這個方式在頁面中引用元件，然後再自定義標籤中將資料傳遞給元件：

2、子元件中獲取父元件傳遞過來的資料：

props中定義屬性，這是之前在頁面自定義標籤中設定的三個屬性，分別控制組件中的不同部分，定義每個屬性的型別、預設值以及測試函式，注意，測試函式一定要return一個值，不然頁面會報錯，測試函式的引數就是傳遞過來的值：

scrolldatas是一個數組，之後便是迴圈遍歷這個陣列中的元素，陣列中的值就能展示在頁面了，頁面元素會隨著陣列元素的改變而改變：

之後就是其他兩個變數怎麼在組建中引用了：

首先我要在測試函式中判斷一下，這個傳進來的值符合不符合要求，如果不符合，那就不執行測試函式，就是預設值，如果符合要求，執行函式，並在函式中改變預設值，賦值給相應自定義變數：

之後就是呼叫函式，呼叫函式中傳入引數，這個引數現在的值不是最開始var的初始值，而是後來測試函式中因為符合測試函式的條件後來賦給的值（因為window.onload直到頁面載入才會執行）：

之後就要在需要用到這個變數的函式中傳一個引數（speed，這個speed的值就是上面changespeed的值）:

所以經過一會說那個的操作，只要在獲取資料的地方修改值，頁面效果就會隨之改變，不需要再元件中修改任何東西：

補充知識：vue 中如何修改傳給component中的屬性的值並賦值到template中

記錄下來加強記憶

在外面引用option-item-template模板並傳值進去，然後在component中對值進行修改然後在賦值到template

下面是外面引用的寫法

<option-item-template v-bind:item="item" v-for="optionItem in item.option" v-bind:optionitems="optionItem" v-bind:answer="item.data.answer" v-bind:hassub="changeData.hasSub"></option-item-template>

模板部分的程式碼

Vue.component('option-item-template',{
  props: ['item','optionitems','answer','hassub'],data: function () {
    return {
      classname: {
        "choose-content": true,"stan-answer": false
      }
    }
  },watch: {
    hassub: function (newValue,oldValue) {//當hassub屬性的值發生改變時會執行下面的程式碼
      this.changeStanAnswer(newValue,this.answer);
    }
  },mounted: function () {//模組編譯/掛載之後執行
    this.changeStanAnswer(this.hassub,this.answer);
  },methods: {
    changeStanAnswer: function (sub,answer) {
      if (sub && (answer.indexOf(this.optionitems.chooseName) != -1)) {
        this.classname = {
          "choose-content": true,"stan-answer": true
        };
      } else {
        this.classname = {
          "choose-content": true,"stan-answer": false
        };
      }
    }
  },template: '<li class="mui-table-view-cell" v-if="optionitems.selectName || optionitems.selectImage">'
    + '<label :class="classname">'
    + '<input v-if= "item.data.itemType==2" type="checkbox" :name="item.data.tiKuId" v-bind:data-number="item.data.shiJuanNumber" data-type="checkbox" :value="optionitems.chooseName" />'
    + '<input v-else type="radio" :name="item.data.tiKuId" v-bind:data-number="item.data.shiJuanNumber" :value="optionitems.chooseName" data-type="radio" />'
    + '<span class= "choose-btn" >{{optionitems.chooseName}}</span>'
    + '<span class="choose-text">'
    + '{{optionitems.selectName}}'
    + '![在這裡插入圖片描述]()'
    + '</span>'
    + '</label></li>'
});

由上面的程式碼所示，根據傳進來的值hassub，和optionitems.chooseName的值來拼成最後需要載入的樣式及class的值。
hassub的值是會變化的，同時需要根據改變的值載入不同的樣式就需要在watch中監聽hassub的值，當它的值發生改變時同時也改變class的值。

以上這篇vue實現從外部修改元件內部的變數的值就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。