Vue组件化通讯的实例代码

2024-02-18 02:24:02 50

1.Vue的组成文件(.vue)

分为三部分，分别对应html,js,css

2.Vue的生命周期函数

beforeCreate()创建数据之前
created()创建数据我们在这里的得到我们在data里面创建的数据
beforeMount()//Dom渲染完成前
mounted()//Dom渲染完成
beforeUpdate()//更新视图在beforeUpdate触发时，视图已经更新完成
Updated()//更新数据调用的函数、。



{{msg}}

varapp=newVue({ el:'#app', data(){ return{ msg:1 } }, beforeCreate(){ console.log('beforeCreate',this.msg);//beforeCreateundefined console.log('beforeCreate:',document.getElementsByTagName('p')[0])//beforeCreate

}, created(){ //创建数据 console.log('created',this.msg);//beforeCreate1 console.log('created:',document.getElementsByTagName('p')[0])//beforeCreate

//异步处理得到渲染的dom数据 setTimeout(()=>{ this.msg=100 console.log('nextTick',document.getElementsByTagName('p')[0]) },100) //nextTick

100

}, beforeMount(){ console.log('beforeMount',this.msg)//beforeMount1 console.log('beforeMount:',document.getElementsByTagName('p')[0])//beforeMount

}, mounted(){ //渲染dom console.log('mounted',this.msg)//mounted1 console.log('mounted:',document.getElementsByTagName('p')[0])//mounted

}, beforeUpdate(){ console.log('beforeUpdate',this.msg)//beforeUpdate100 console.log('beforeUpdate:',document.getElementsByTagName('p')[0])//beforeUpdate

100

}, updated(){ console.log('updated',this.msg)//updated1 console.log('updated:',document.getElementsByTagName('p')[0])//updated

100

} })

生命周期参考链接

3.exportdefault

每一个模块都是自己的作用域，相应的属性来处理数据和函数

data(声明数据，可以是函数和属性)

类型：Object|Function

组件只接受函数

//对象的形式
exportdefault{
data:{
a:1
}
}
//函数的形式
exportdefault{
data(){
return{
a:1
}
}
}

methods(一些指令和其他属性的调用方法)

不要用箭头函数来写里面的函数
this指向Vue的实例

exportdefault{
methods:{
plus(){
this.a++
}
}
}

1、components(组件化定义)

类型：Object

自定义元素，增加代码的复用性

//当我们引用一个.vue文件的时候，就像使用这个文件来充当我们主体的一部分




importhellofrom'./hello.vue'
exportdefault{
components:{
hello
}
}

2、computed(计算属性)

计算属性的结果会被缓存，依赖的数据发生变化才会重新渲染
注意计算属性和methods,watch的区别

{{this.total}}//[3,4]
添加数据//点击会更新this.total

exportdefault{
data:()=>({
a:1,
b:[2,3]
}),
methods:{
add(){
this.b.push(8);
}
},
computed:{
total(){
returnthis.b.map((item)=>{
returnitem+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:'WelcometoYourVue.jsApp'
}
},
methods:{
change(){
this.$emit('sendMsg',this.msg)//把msg传递给父组件
}
}

//父组件
//引入子组件，并定义components
components:{
hello
},
methods:{
show(msg){//这里接受子组件传递的参数
console.log(msg);
}
}

//这里不用传递参数，不然会覆盖子元素传递的参数

ref(用来获取dom和子组件)

可以用来操作domhello
可以用来组件中的通讯
在组件中使用的this.refs是一个对象，包含了所有的绑定了的dom和子组件

//html
这是一个dom元素//dom元素
//子组件
>--组件中this.refs=>{myElement:h1,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

这是world的dom元素
给父元素传递dom

methods:{ send(){ this.$emit('give',this.$refs.world);//给父元素发送dom }

Vue组件化通讯的实例代码

热门推荐

随机推荐