如何将 Vue.js 2 组件值分配给主实例变量？
Posted
技术标签:
【中文标题】如何将 Vue.js 2 组件值分配给主实例变量？【英文标题】：How to assign Vue.js 2 component value to main instance variable? 【发布时间】：2018-02-04 21:35:53 【问题描述】：我实际上处于 Vue.js 2 的学习阶段。我正在尝试将组件复选框值附加到主 Vue.js 实例数据数组变量。但是我总是在 brandArray 中得到空数组。任何帮助，将不胜感激。
<!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>
【问题讨论】：
【参考方案1】：因为你在根 vue 实例中设置了brandArray，但是你尝试在名为app-brand 的子组件中使用它，将brandArray 移动到子组件的数据中可以帮助你克服它。
由于 vuejs2 不允许双向数据流。 vuejs中父子共享数据，一般有3种常用的方式。
-
Props-Events（
.sync 修饰符只是该方法的语法糖）
Event Bus
Vuex
【讨论】：
这工作正常，我也可以在子组件中打印它。但是，如果想在子组件之外打印它，有可能吗？也许有任何可用的绑定函数来做到这一点？ 我认为您正在寻找此文档：vuejs.org/v2/guide/components.html#Passing-Data-with-Props @FRSTAR 我更新了我的答案，为您提供更详细的信息。请看一看。以上是关于如何将 Vue.js 2 组件值分配给主实例变量？的主要内容，如果未能解决你的问题，请参考以下文章
基本 vue.js 2 和 vue-resource http 获取变量赋值
如何在 Vue.js 中将实例化的 Vue 组件作为道具传递？