將Props組件傳遞給根實例

我是vuejs的超級新手。我不知道如何將道具組件傳遞給根實例這是我的代碼。將Props組件傳遞給根實例

組分（Tesvue.vue）

<template> 
    <label class="col-md-2 control-label">{{name}}</label> 
</template> 

<script> 
export default { 
    props: ['name'] 
} 
</script>

根（app.js）

window.Vue = require('vue'); 
import tesvue from './components/Tesvue.vue'; 

var vm = new Vue({ 
    el: '#app', 
    components: { 
     tesvue 
    }, 
    data:{ 
     getname: '' 
    } 
});

葉片文件

<div class="" id="app"> 
    <tesvue name="{{$model->name}}"></tesvue> 
</div>

的方案是，從laravel控制器即時獲取數據到刀片元素，那麼vue js可以訪問它。這就像傳遞給vuejs的php變量。我知道這可以用Php-vars-to-javascript插件完成，或者我可以直接使用它。像這樣 var name = {{name}}

但我想用vuejs的方式做（道具）。

那麼如何將道具數據傳遞給根實例。 'getname'如何獲得道具'名字' 謝謝，對不起我的壞英語。

來源

2017-10-11 Nusendra Hanggarawan

使用商店我的朋友。 – CENT1PEDE

看起來像什麼？這是一個Vuex嗎？ –

是的，它是Vuex，簡單地解釋它，當你使用存儲你的數據將在Vue實例中的任何地方可用。 – CENT1PEDE

組件不能直接將數據傳回給其父項。這隻能通過事件來實現。因此，爲了這個工作，你必須立即從子組件發出一個事件，並且必須收聽該事件。在你的情況下，它是這樣的：

組件（Tesvue.vue）

<template> 
    <label class="col-md-2 control-label">{{name}}</label> 
</template> 

<script> 
export default { 
    props: ['name'], 
    mounted() { 
     this.$emit('setname', this.name); 
    } 
} 
</script>

根（app.js）

window.Vue = require('vue'); 
import tesvue from './components/Tesvue.vue'; 

var vm = new Vue({ 
    el: '#app', 
    components: { 
     tesvue 
    }, 
    data: { 
     getname: '' 
    } 
    methods: { 
     changeName(name) { 
      this.getname = name; 
     } 
    } 
});

刀片文件

<div class="" id="app"> 
    <tesvue name="{{$model->name}}" @setname="changeName"></tesvue> 

    <!-- getname got set through changeName event --> 
    <span v-text="getname"></span> 
</div>

來源

2017-10-11 06:55:27 Reduxx

我找到了解決辦法

<template> 
    <label class="col-md-2 control-label">{{name}}</label> 
</template> 

<script> 
export default { 
    props: ['name'], 
    mounted: function() { 
    this.$root.getname = this.name; 
    } 
} 
</script>

檢查了這一點 https://jsfiddle.net/mtL99x5t/

但許多感謝@Reduxxx的回答我的新手問題。

來源

2017-10-11 07:15:47

是的，它可以工作，但是...它是基於組件的spa的反模式。我認爲更好的解決方案是將setter方法暴露給孩子。所以根組件「知道」有人會設置它，而根組件決定誰可以做到這一點;） – donMateo

更好的想法是使用store（vuex）來集中這些數據。 – donMateo

是的，我在YouTube上看到vuex後。也許vuex將是最好的解決方案。謝謝 –

這裏是很好的解決方案使用的數據集：

HTML：

<div id="app" data-name="dataname">

組件（Testvue.vue）：

<template> 
    <label class="col-md-2 control-label">{{name}}</label> 
</template>

根實例（App.js）

const root_element = document.getElementById('app'); 

new Vue({ 
    el: root_element, 
    propsData: { name: root_element.dataset.name } 
});

查看更多abou t propsData在文檔中。

如果你想同時使用多個數據集，您可以使用擴展操作這樣的分配對象：（如果你用巴貝爾和有object-rest-spread插件）

const root_element = document.getElementById('app'); 

new Vue({ 
    el: root_element, 
    propsData: { ...root_element.dataset } 
});

或者，只需使用ES6方法，如果您還沒有使用巴貝爾：（Object.assign()）

propsData: Object.assign({},root_element.dataset)

因此，如果您已在HTML中定義多個數據集是這樣的：

<div id="app" 
data-name="dataname" 
data-another="anotherdata" 
data-anything-else="anydata">

可以公開的道具是這樣的：

export default { 
    // ... 
    props: ['name', 'another', 'anythingElse'], 
    // ... 
};

來源

2018-02-27 14:52:23

有一些方法可以從孩子傳遞數據給parent.The最好的和可接受的使用Vuex存儲和發出的事件。

如果你想發出從孩子的事件，你可以調用一個方法來做到這一點：

callThisMethod() { 
    this.$emit('nameOfEventYouWantToListen', dataToPass) 
}

然後你就可以聽這個事件在父組件中，你必須導入組件

<ImportedComponent @nameOfEventYouWantToListen="callFunctionInParentHere" />

另外，如果你想使用Vuex然後去在商店的狀態下創建一個財產，也是一個獲得者從狀態中獲得該財產，並通過突變來改變位於該州的財產的價值。

然後在父組件使用消氣劑獲得國家和子組件犯了突變的性質（將是巨大的，如果您在整個proccess壽動作）來改變狀態的屬性。

來源

2018-02-27 22:02:37

將Props組件傳遞給根實例

回答

相關問題