如何将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组件的值赋给主实例变量？

回答

相关问题