符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章主要介绍了Vue中如何实现组件化通讯的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中如何实现组件化通讯文章都会有所收获,下面我们一起来看看吧。
成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的柳州网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
1. Vue的组成文件(.vue)
分为三部分,分别对应html,js,css
2. Vue的生命周期函数
beforeCreate() 创建数据之前
created() 创建数据 我们在这里的得到我们在data里面创建的数据
beforeMount() // Dom渲染完成前
mounted() //Dom渲染完成
beforeUpdate() // 更新视图 在beforeUpdate触发时,视图已经更新完成
Updated() //更新数据调用的函数、。
var app = new Vue({ el: '#app', data() { return { msg: 1 } }, beforeCreate() { console.log('beforeCreate', this.msg); //beforeCreate undefined console.log('beforeCreate: ', document.getElementsByTagName('p')[0]) //beforeCreate{{msg}}
{{msg}}
}, created() { // 创建数据 console.log('created', this.msg); //beforeCreate 1 console.log('created: ', document.getElementsByTagName('p')[0]) //beforeCreate{{msg}}
// 异步处理得到渲染的dom数据 setTimeout(() => { this.msg = 100 console.log('nextTick', document.getElementsByTagName('p')[0]) }, 100) // nextTick100
}, beforeMount() { console.log('beforeMount', this.msg) //beforeMount 1 console.log('beforeMount: ', document.getElementsByTagName('p')[0]) // beforeMount{{msg}}
}, mounted() { // 渲染dom console.log('mounted', this.msg) //mounted 1 console.log('mounted: ', document.getElementsByTagName('p')[0]) //mounted1
}, beforeUpdate() { console.log('beforeUpdate', this.msg) //beforeUpdate 100 console.log('beforeUpdate: ', document.getElementsByTagName('p')[0]) //beforeUpdate100
}, updated() { console.log('updated', this.msg) // updated 1 console.log('updated: ', document.getElementsByTagName('p')[0]) // updated100
} })
生命周期参考链接
3. export default
每一个模块都是自己的作用域,相应的属性来处理数据和函数
data(声明数据,可以是函数和属性)
类型:Object | Function
组件只接受函数
// 对象的形式 export default{ data: { a:1 } } // 函数的形式 export default{ data(){ return { a: 1 } } }
methods(一些指令和其他属性的调用方法)
不要用箭头函数来写里面的函数
this指向Vue的实例
export default{ methods: { plus() { this.a++ } } }
1、components (组件化定义)
类型: Object
自定义元素,增加代码的复用性
// 当我们引用一个.vue文件的时候,就像使用这个文件来充当我们主体的一部分import hello from './hello.vue' export default { components: { hello } }
2、computed(计算属性)
计算属性的结果会被缓存,依赖的数据发生变化才会重新渲染
注意计算属性和methods,watch的区别
{{this.total}} //[3,4] //点击会更新this.total export default { data: () => ({ a: 1, b: [2,3] }), methods: { add(){ this.b.push(8); } }, computed: { total(){ return this.b.map((item)=>{ return item+this.a }) } } }
watch(监听对应的数据)
键值对。键是我们需要监督的数据,值是相应的回调函数
回调函数接受2个参数,新的值和旧的值(对于数组和对象不会出现旧值,对于简单的数据会出现旧值)
监听对象的内部值变化,需要添加deep:true(数组不用)
// 点击后相应的变化 data(){ return { a: 1, b: [2,4,6], c:{name:'hcc',age:22} } }, methods: { add(){ this.a++ this.b.push(8) this.c.name = 'yx' } }, watch: { b: function(val, oldVal){ console.log('new', val) //[2,4,6,8] console.log('new', oldVal) //[2,4,6,8] }, a: function(val, oldVal){ console.log(val); //2 console.log(oldVal); //1 }, c:{ handler(val){ console.log(val); //{name: 'yx',age: 22} } } },
props(用于接受父组件传来的数据)
规定和接受父组件的数据
单向数据流,子组件不能修改传递过来的数据
对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
可以规定接受的数据类型和默认值,如果是对象和数组,默认值导出是一个函数
// 父组件//html components: { hello }, data(){ return { num: 3 } } //子组件 //1. 数组规定接受的数据 props: ['hello'] //2. 验证的方式 props:{ hello: Number, hello: [String, Number], hello: { type: Object, default(){ return {message: 'hello'} } } }
v-on和v-emit(子组件向父元素传递数据)
vm.$emit: 子元素向父元素定义讯号和传递数据
this.$emit('规定的讯号名称', '想传递给父元素的数据')
vm.$on: 监听讯号,并触发相应的函数(函数内部不用传参)
@'规定的讯号名称'='调用自己组件的方法并可以接受传递的参数'
// 子组件 data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { change(){ this.$emit('sendMsg',this.msg) //把msg传递给父组件 } } // 父组件 // 引入子组件,并定义components components: { hello }, methods: { show(msg){ // 这里接受子组件传递的参数 console.log(msg); } }// 这里不用传递参数,不然会覆盖子元素传递的参数
ref(用来获取dom和子组件)
可以用来操作dom
hello
可以用来组件中的通讯
在组件中使用的this.refs是一个对象,包含了所有的绑定了的dom和子组件
// html这是一个dom元素
//dom元素// 子组件 >-- 组件中this.refs => {myElement: h2, child: VueComponent} // 运用(在父元素中调用子元素的方法) // html // 子元素hello methods: { change() { this.$emit('getson',this.msg) this.obj.name = 'yx' }, drop(el) { el.style.background = 'red'; } }, // 父元素 methods: { add() { console.log(this.refs); //{child: VueComponent} this.$refs.child.drop('这里传递父元素的dom节点') } } //如果有一个需求是,一个父元素有2个子组件,其中一个子组件的方法要调用另一个子组件的dom元素 //1. 一个子组件需要向父组件发送元素this.$emit('方法名',dom) //2. 父元素接受到子组件的传递得到对应dom //3. 父元素通过this.$refs调用对应的另一个子组件的方法并传入参数 // 子元素hello和world methods: { send(){ this.$emit('give',this.$refs.world); //给父元素发送dom }这是world的dom元素
methods: { changeDom(target){ console.log(target) } } // 父元素methods: { // 这里接受子元素传递过来的dom元素 '父亲自己的方法'(target) { this.refs.helloChild.changeDom(target) //调用另一个子元素的方法,并把dom传递过去 } }
关于“Vue中如何实现组件化通讯”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue中如何实现组件化通讯”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。