我试图了解如何正确地观察一些道具变异.我有一个父组件(.vue文件)从ajax调用接收数据,将数据放入一个对象并使用它通过v-for指令呈现一些子组件,简化我的实现:
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
...然后在<script>标签内:
data(){
return {
players: {}
},
created(){
let self = this;
this.$http.get('../serv/config/player.php').then((response) => {
let pls = response.body;
for (let p in pls) {
self.$set(self.players, p, pls[p]);
}
});
}
item对象是这样的:
item:{
prop: value,
someOtherProp: {
nestedProp: nestedValue,
myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
},
}
现在,在我的孩子"玩家"组件中,我正在尝试观察任何Item的属性变化,我使用:
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to …在VueJs 2.0文档中,我找不到任何可以监听props变化的钩子.
VueJs有类似onPropsUpdated()或类似的钩子吗？
更新
正如@wostex建议的那样,我尝试了watch我的财产但没有改变.然后我意识到我有一个特例:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
我传递的myProp是父组件接收到child组件.那watch: {myProp: ...}就是不行.
我正在尝试在组件中使用on click指令,但它似乎不起作用.当我点击组件时,当我在控制台中获得"测试点击"时,会发生无关紧要的事情.我没有在控制台中看到任何错误,所以我不知道我做错了什么.
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuetest</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template>
<div id="app">
<test v-on:click="testFunction"></test>
</div>
</template>
<script>
import Test from './components/Test'
export default {
name: 'app',
methods: {
testFunction: function (event) {
console.log('test clicked')
}
},
components: {
Test
}
}
</script>
Test.vue(组件)
<template>
<div>
click here
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
msg: 'Welcome to Your …1.如何在Vue 2中设置组件道具的默认值？例如,有一个movies可以这种方式使用的简单组件:
<movies year="2016"><movies>
Vue.component('movies', {
props: ['year'],
template: '#movies-template',
...
}
但是,如果用户没有指定year:
<movies></movies>
那么组件将为yearprop提供一些默认值.
2.此外,检查用户是否未设置道具的最佳方法是什么？这是一个好方法:
if (this.year != null) {
// do something
}
或者这个:
if (!this.year) {
// do something
}
？
我开始玩vuejs(2.0).我构建了一个包含一个组件的简单页面.该页面有一个带有数据的Vue实例.在那个页面上,我注册并将组件添加到html.该组件有一个input[type=text].我希望该值反映在父(主Vue实例)上.
如何正确更新组件的父数据？从父级传递绑定的prop并不好,并向控制台发出一些警告.他们的文档中有一些东西,但它不起作用.
我将使用两个外部脚本作为支付网关.现在两者都放在'index.html'文件中.但是,我不想在开头加载这些文件.仅当用户打开特定组件(使用路由器视图)时才需要支付网关.反正有没有实现这个目标？
在vuejs 2.0 model.sync中将被弃用.
那么,在vuejs 2.0中兄弟组件之间进行通信的正确方法是什么？
我在Vue 2.0中发现的想法是通过使用商店或事件总线进行兄弟姐妹的沟通.
据埃文说:
值得一提的是"在组件之间传递数据"通常是一个坏主意,因为最终数据流变得无法跟踪并且很难调试.
[ 链接到讨论 ]
和:
.once并且.sync已弃用.道具现在总是单向下降.要在父作用域中产生副作用,组件需要显式地emit显示事件而不是依赖于隐式绑定.
(所以,他建议使用$emit和$on)
我很担心因为:
store并event具有全球知名度(纠正我,如果我错了);我想要的是以某种方式或兄弟姐妹组件的可见性范围.或者也许我没有抓住这个想法.eventsstores
那么,如何以正确的方式沟通？
我刚刚安装了Vue,并且一直在使用vue-cli webpack模板创建项目.当它创建组件时,我注意到它将我们的数据绑定在以下内容中:
export default {
name: 'app',
data: []
}
而在其他教程中,我看到绑定的数据:
new Vue({
el: '#app',
data: []
)}
有什么区别,为什么看起来两者之间的语法不同？我无法从我在vue-cli生成的App.vue中使用的标签内部获取"新Vue"代码.
我有一个动态的观点:
<div id="myview">
<div :is="currentComponent"></div>
</div>
与关联的Vue实例:
new Vue ({
data: function () {
return {
currentComponent: 'myComponent',
}
},
}).$mount('#myview');
这允许我动态地更改我的组件.
就我而言,我有三个不同的部分组成:myComponent,myComponent1,和myComponent2.我在他们之间切换如下:
Vue.component('myComponent', {
template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}
现在,我想把道具传递给myComponent1.
当我将组件类型更改为时,如何传递这些道具myComponent1？
var MainTable = Vue.extend({
template: "<ul>" +
"<li v-for='(set,index) in settings'>" +
"{{index}}) " +
"{{set.title}}" +
"<button @click='changeSetting(index)'> Info </button>" +
"</li>" +
"</ul>",
data: function() {
return data;
}
});
Vue.component("main-table", MainTable);
data.settingsSelected = {};
var app = new Vue({
el: "#settings",
data: data,
methods: {
changeSetting: function(index) {
data.settingsSelected = data.settings[index];
}
}
});
使用上面的代码,单击按钮时会出现以下错误.
[Vue警告]:属性或方法"changeSetting"未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.(找到
<MainTable>)
vue-component ×10
vue.js ×10
javascript ×9
vuejs2 ×6
vue-cli ×1
vue-resource ×1
vue-router ×1
vuex ×1