vue初识
来源:互联网 发布:图片设计软件 编辑:程序博客网 时间:2024/05/17 09:30
什么是Vue组件?
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。
Vue组件间通信
父组件向子组件通信
方法一:props
使用props,父组件可以使用props向子组件传递数据。
父组件vue模板father.vue
<template> <child :msg="message"></child></template><script>import child from './child.vue';export default { components: { child }, data () { return { message: 'father message'; } }}</script>
子组件vue模板child.vue
<template> <div>{{msg}}</div></template><script>export default { props: { msg: { type: String, required: true } }}</script>
方法二 使用$children
使用$children可以在父组件中访问子组件。
$children返回子组件的实例,是一个数组
<div id="count"> <button @click="showmsg"> 显示两个组件的信息 </button> <child1></child1> <child2></child2> </div><template id="child1"> <div> {{ msg }} </div></template><template id="child2"> <div> {{ msg }} </div></template><script> Vue.component('child1', { template: '#child1', data () { return { msg: '这是子组件1的信息' } } }) Vue.component('child2', { template: '#child2', data () { return { msg: '这是子组件2的信息' } } }) new Vue({ el: '#count', data: { }, methods: { showmsg () { for(var i = 0; i < this.$children.length; i++) { alert(this.$children[i].msg) } } } })</script>
(http://www.jianshu.com/p/4ba5577914bb)
子组件向父组件通信
方法一:使用vue事件
父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件。
父组件vue模板father.vue
<template> <child @msgFunc="func"></child></template><script>import child from './child.vue';export default { components: { child }, methods: { func (msg) { console.log(msg); } }}</script>
子组件vue模板child.vue
<template> <button @click="handleClick">点我</button></template><script>export default { props: { msg: { type: String, required: true } }, methods () { handleClick () { //........ this.$emit('msgFunc'); } }}</script>
方法二: 通过修改父组件传递的props来修改父组件数据
这种方法只能在父组件传递一个引用变量时可以使用,字面变量无法达到相应效果。因为饮用变量最终无论是父组件中的数据还是子组件得到的props中的数据都是指向同一块内存地址,所以修改了子组件中props的数据即修改了父组件的数据。
但是并不推荐这么做,并不建议直接修改props的值,如果数据是用于显示修改的,在实际开发中我经常会将其放入data中,在需要回传给父组件的时候再用事件回传数据。这样做保持了组件独立以及解耦,不会因为使用同一份数据而导致数据流异常混乱,只通过特定的接口传递数据来达到修改数据的目的,而内部数据状态由专门的data负责管理。
方法三:使用$parent
使用$parent可以访问父组件的数据。
非父子组件、兄弟组件之间的数据传递
非父子组件通信,Vue官方推荐使用一个Vue实例作为中央事件总线。
Vue内部有一个事件机制,可以参考源码。
$on方法用来监听一个事件。
$emit用来触发一个事件。
/*新建一个Vue实例作为中央事件总嫌*/let event = new Vue();/*监听事件*/event.$on('eventName', (val) => { //......do something});/*触发事件*/event.$emit('eventName', 'this is a message.');
多层级父子组件通信:
在Vue1.0中实现了
之前在学习饿了么的开源组件库element的时候发现他们重新实现了broadcast以及dispatch的方法,以mixin的方式引入,具体可以参考《说说element组件库broadcast与dispatch》。但是跟Vue1.0的两个方法实现有略微的不同。这两个方法实现了向子孙组件事件广播以及向多层级父组件事件派发的功能。但是并非广义上的事件广播,它需要指定一个commentName进行向指定组件名组件定向广播(派发)事件。
其实这两个方法内部实现还是用到的还是
复杂的单页应用数据管理
当应用足够复杂情况下,请使用vuex进行数据管理。
- Vue初识
- 初识Vue
- 初识vue
- vue初识
- Vue入门01-vue初识
- 初识Vue.js
- 初识vue.js
- 初识vue(一)
- 初识vue系列一
- 初识vue.js
- 初识Vue.js
- 初识 webpack vue项目
- Vue实践--初识组件
- Vue入门知识点—初识vue
- Vue学习日志:初识VUE(1)
- 初识vue系列之二
- vue 初识 --小菜鸟笔记
- vue.js初识,请多指教。
- drop、truncate和delete的区别
- HDPCD-Java-复习笔记(15)
- js如何获取哪些复选框被选中
- HDU 5226 Tom and matrix 组合数求和+Lucas定理.
- H5与android客户端JS交互方案
- vue初识
- [iOS]APP中保存图片到相册时崩溃
- JavaSE基础-01-对象
- 阿里云移动测试平台使用教程
- Dispatcher
- Azure 虚拟机上的 SQL Server 常见问题
- [题解] NOI2002 银河英雄传说 (并查集)
- C++笔记——拷贝构造函数1
- 2年Java开发工作经验面试总结