本文深入解析Vue中的组件间通信和slot功能，通过实例演示如何利用MVVM模式实现数据驱动的DOM操作。了解如何利用Vue的`$children`和`$refs`，以及slot的灵活应用，提升开发效率。
1、兄弟组件交互
demo.html
~~~
兄弟组件交互.green{background-color: green;-webkit-transition: all .5s ease;transition: all .5s ease;}
.greenActive{background-color: #f00;}
var app = new Vue({
el: '#app',
data: {
worldStyle: {
width: '100px',
height: '100px',
border: '1px solid #ddd',
marginTop: '10px'
}
},
components: {
'Hello': {
template: '
{{ say }}
data: function() {
return {
helloStyle: {
width: '200px',
height: '200px',
backgroundColor: '#ccc'
},
say: 'hello'
};
},
methods: {
clickFn: function() {
this.say = 'hello';
app.$children[1].$data.classA = 'green greenActive'
}
}
},
'World': {
props: {
title: String
},
data: function() {
return {
classA: 'green'
};
},
template: '
methods: {
clickFn: function() {
this.classA = 'green';
app.$children[0].$data.say = 123;
// app.$refs.hello.say = 333; 使用ref来实现
}
}
}
}
});
~~~
上述无疑就是VUE的核心所在，MVVM模式
在DOM与JS之间加个中间件VUE，使得DOM与JS的交互更便捷。。
写到这里突然感觉写不下去了，毕竟没有在项目中使用，而且VUE API中的东西稍多，一一介绍不如看VUE API。。
只想说在合适的地方使用VUE，不要偏激。。
2、slot卡槽
demo.html
~~~
slotCopyright 2016 Evan You
main
Vue.component('blog-post', {
render: function (createElement) {
var header = this.$slots.header;
var body = this.$slots.default;
var footer = this.$slots.footer;
return createElement('div', [
createElement('header', '123'),
createElement('main', body),
createElement('footer', footer)
])
}
})
new Vue({
el: '#demo'
});
~~~
扫一扫
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
