谢谢你阅读我的问题.
我读过它
https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2
概念是一样的,我需要将数据对象从子传递给父,我使用$ emit将数据传递给父组件,但不起作用.你知道出了什么问题吗？在这里检查我的代码:
Vue.component('list-products', {
delimiters: ['[[', ']]'],
template: '#list-products-template',
props: ['products'],
data: function () {
return {
productSelected: {}
}
},
methods: {
showDetailModal: function (product) {
console.log('click product in child, how can i pass this product to productSelected data in parent?');
console.log(product);
this.productSelected = product;
this.$emit('clickedShowDetailModal', product);
}
}
});
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#resultComponent',
data: {
listProducts: [
{'name':'test1',id:1},
{'name':'test2',id:2},
{'name':'test3',id:3}
],
productSelected: {}
},
methods: {
clickedShowDetailModal: function …我有3个组件(get-users,get-projects,get-tasks) - 每个组件都包含一个按钮,用于触发ajax请求以检索某些数据.我希望从ajax请求返回的数据显示在页面上的第四个独立组件中(show-results).例如
<div class="row">
<div class="col-md-6>
<get-users></get-users>
<get-projects></get-projects>
<get-tasks></get-tasks>
</div>
<div class="col-md-6>
<show-results></show-results>
</div>
</div>
get-users组件:
<script>
export default {
template: require('./get_users.template.html'),
data: function() {
return {
userList: ''
}
},
methods: {
getUsers(e) {
e.preventDefault();
this.$http.get('api/getusers').then(function (response) {
this.userList = response.data.users; // How can I also pass this to the show-results component?
})
}
}
}
</script>
Vue实例/ decalaration
var Vue = require('vue');
Vue.use(require('vue-resource'));
import getUsers from './components/get_users.vue';
import getProjects from './components/get_projects.vue';
import getTasks from './components/get_tasks.vue';
import showResults …首先，我刚刚开始玩 VueJS，所以这不能是这里建议的 VueJS 版本
它可能是以下内容的副本：
v-bind一次值。我的问题始于我的 Html 看起来像这样：
<div id="app">
<div class="row">
<div class="form-group col-md-8 col-md-offset-2">
<birthday-controls
:birthDay="birthDay"
:birthMonth="birthMonth"
:birthYear="birthYear">
</birthday-controls>
</div>
</div>
</div>
和JS：
Vue.component('birthday-controls', {
template: `<div class="birthday">
<input type="text" name="year" placeholder="yyyy" v-model="birthYear" size="4" maxlength="4"/>
<input type="text" name="month" placeholder="mm" v-show="validYear" v-model="birthMonth" size="3" maxlength="2"/>
<input type="text" v-show="validYear && validMonth" name="day" placeholder="dd" v-model="birthDay" size="2" maxlength="2"/>
</div>`,
props: ['birthDay', 'birthMonth', 'birthYear'],
computed: { …我正在使用Vue.js构建单页应用程序.这是一个相对简单的应用程序,更像是一个扩展的,固定的电子表格.我正在使用vue-router处理应用程序的不同视图,一些用于输入新数据,一些用于执行数据计算但所有数据交织在一起(在视图#1中输入的数据用于在视图中输入数据# 2然后两者都用于计算视图#3中的内容.
这意味着我需要一个全局数据结构.根据我的研究,我发现我有几种方法可以解决这个问题:
$parent.$data像这样:
const REPORTS = {
template: templates.reports,
data: function(){
return this.$parent.$data
}
};
但是,我的第六感觉告诉我,这不是一个好习惯.
如果我是对的,有什么更好的方法来实现这一目标:一,全球数据结构,可以从所有组件访问？
任何人都知道我们在Web组件设计中遇到的常见设计问题.我已经开始使用Vuejs/ReactJS和Angular 2,但我面临的最常见问题是组件之间的通信.我想与其他动态组件交谈,并将一些数据传递给它,期待数据的回报.
就像我有一个重复的项目列表和所有项目,我必须打开一个选项选择菜单(可重复使用).我想在选择一个选项时也回复一个回调.您可以想到驻留在#app元素下的常见Modal或Popover.
不知何故,我使用PubSub模式实现了这一点,但不认为使用它是个好主意.请建议是否有人对此有任何更好的了解.
我正在使用带有框架的vue-cordova-webpack(https://github.com/OnsenUI/vue-cordova-webpack)模板项目Onsen UI.
我有一个我从父母那里调用的子组件,如下所示:
<template>
<!-- ... -->
<child :value1="value1"
:value2="value2">
</child>
<!-- ... -->
</template>
在我有的子组件中:
<template>
<!-- ... -->
<v-ons-search-input v-model="mutableValue1"> </v-ons-search-input>
<v-ons-checkbox v-model="mutableValue2"> </v-ons-checkbox>
<!-- ... -->
</template>
export default {
props: ['value1', 'value2'],
name: 'child',
data() {
return {
mutableValue1: this.value1,
mutableValue2: this.value2,
};
}
};
现在,正如您所看到的,当用户更改和组件的值时,会更新mutableValue1和mutableValue2变量.<v-ons-search-input><v-ons-checkbox>
(我介绍了这些mutableValue1和mutableValue2变量以避免[Vue warn]: Avoid mutating a prop directly since the value will be overwritten …