如何將Vue.js 2組件的值賦給主實例變量？

我實際上在Vue.js 2的學習階段。我試圖將組件複選框值附加到主要Vue.js實例數據數組變量。不過，我總是在{{ brandArray }}中獲得空陣列。任何幫助，將不勝感激。如何將Vue.js 2組件的值賦給主實例變量？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container"> 
<div id="app"> 
    <p>Brands</p> 
    <app-brand></app-brand> 

{{ brandArray }} 

</div> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script> 
<script type="text/javascript"> 

    Vue.component('app-brand', { 
     data: function() { 
      return { 
       brands: [{ 
        b_id: 1, 
        b_name: 'BRAND 1' 
       }, { 
        b_id: 2, 
        b_name: 'BRAND 2' 
       }, { 
        b_id: 3, 
        b_name: 'BRAND 3' 
       }, { 
        b_id: 4, 
        b_name: 'BRAND 4' 
       }] 
      } 
     }, 
     template: '<div><div class="checkbox" v-for="brand in brands"><label><input type="checkbox" @click="setBrand($event)" :value="brand.b_id" v-model="this.brandArray" >: {{ brand.b_name }}</label></div></div>', 
     methods : { 
      setBrand: function (e) { 

       if (e.target.checked) { 
       console.log(e.target.value) 
       } 

      } 
     } 
    }) 


    new Vue({ 
     el: '#app', 
     data: { 
      brandArray: [], 
      colour: [], 

     } 
    }) 
</script> 
</body> 
</html>

來源

2017-08-27 FR STAR

因爲你在根VUE實例設置brandArray，但你試過用它命名爲app-brand子組件，移動brandArray到子組件的數據可以幫助你克服它。

由於vuejs2不允許雙向數據流。爲了在vuejs中分享父母和孩子之間的數據，通常使用3種方式。

Props-Events（.sync修改就是該方法的語法糖）
Event Bus
Vuex

來源

2017-08-27 13:27:22 choasia

這是工作的罰款，我也可以打印子組件內。然而，如果想要將它打印到子組件外面，可能嗎？也許有任何可用的綁定功能嗎？ –

我認爲你正在尋找這個文件：https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props – choasia

@FRSTAR我更新了我的答案給你更詳細的信息。請看一看。 – choasia

如何將Vue.js 2組件的值賦給主實例變量？

回答

相關問題