好资源导航 » 文章资讯 » vue-父子组件和ref实例详解

vue-父子组件和ref实例详解

2023-08-09 15:12:04 174

父组件向子组件传值

//创建Vue实例，得到ViewModel varvm=newVue({ el:'#app', data:{ msg:'123啊-父组件中的数据' }, methods:{}, components:{ //结论：经过演示，发现，子组件中，默认无法访问到父组件中的data上的数据和methods中的方法 com1:{ data(){//注意：子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，都可以放到data身上； //data上的数据，都是可读可写的； return{ title:'123', content:'qqq' } }, template:'这是子组件---{{parentmsg}}', //注意：组件中的所有props中的数据，都是通过父组件传递给子组件的 //props中的数据，都是只读的，无法重新赋值 props:['parentmsg'],//把父组件传递过来的parentmsg属性，先在props数组中，定义一下，这样，才能使用这个数据，只读，写的话会报警告 directives:{}, filters:{}, components:{}, methods:{ change(){ this.parentmsg='被修改了' } } } } });

父组件向子组件传方法

这是子组件

//定义了一个字面量类型的组件模板对象 varcom2={ template:'#tmpl',//通过指定了一个Id,表示说，要去加载这个指定Id的template元素中的内容，当作组件的HTML结构 data(){ return{ sonmsg:{name:'小头儿子',age:6} } }, methods:{ myclick(){ //当点击子组件的按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法？？？ //emit英文原意：是触发，调用、发射的意思 //this.$emit('func123',123,456) this.$emit('func',this.sonmsg) } } } //创建Vue实例，得到ViewModel varvm=newVue({ el:'#app', data:{ datamsgFormSon:null }, methods:{ show(data){ //console.log('调用了父组件身上的show方法:---'+data) console.log(data); this.datamsgFormSon=data } }, components:{ com2 //com2:com2 } });

vue+本地存储实现评论功能

难道在于理解父组件向子组件传方法





评论人：{{item.user}}
{{item.content}}

评论人：

评论内容：

varcommentBox={ data(){ return{ user:'', content:'' } }, template:'#tmpl', methods:{ postComment(){//发表评论的方法 //分析：发表评论的业务逻辑 //1.评论数据存到哪里去？？？存放到了localStorage中localStorage.setItem('cmts','') //2.先组织出一个最新的评论数据对象 //3.想办法，把第二步中，得到的评论对象，保存到localStorage中： //3.1localStorage只支持存放字符串数据，要先调用JSON.stringify //3.2在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string），转换为一个数组对象，然后，把最新的评论，push到这个数组 //3.3如果获取到的localStorage中的评论字符串，为空不存在，则可以返回一个'[]'让JSON.parse去转换 //3.4把最新的评论列表数组，再次调用JSON.stringify转为数组字符串，然后调用localStorage.setItem() varcomment={id:Date.now(),user:this.user,content:this.content} //从localStorage中获取所有的评论 varlist=JSON.parse(localStorage.getItem('cmts')||'[]') list.unshift(comment) //重新保存最新的评论数据 localStorage.setItem('cmts',JSON.stringify(list)) this.user=this.content='' //this.loadComments()//????? this.$emit('func') } } } //创建Vue实例，得到ViewModel varvm=newVue({ el:'#app', data:{ list:[ {id:Date.now(),user:'李白',content:'天生我材必有用'}, {id:Date.now(),user:'江小白',content:'劝君更尽一杯酒'}, {id:Date.now(),user:'小马',content:'我姓马，风吹草低见牛羊的马'} ] }, beforeCreate(){//注意：这里不能调用loadComments方法，因为在执行这个钩子函数的时候，data和methods都还没有被初始化好 }, created(){ this.loadComments() }, methods:{ loadComments(){//从本地的localStorage中，加载评论列表 varlist=JSON.parse(localStorage.getItem('cmts')||'[]') this.list=list } }, components:{ 'cmt-box':commentBox } });

ref获取DOM和组件

vue中如何操作DOM



哈哈哈，今天天气太好了！！！



varlogin={
template:'登录组件',
data(){
return{
msg:'sonmsg'
}
},
methods:{
show(){
console.log('调用了子组件的方法')
}
}
}
//创建Vue实例，得到ViewModel
//vm中有一个属性叫ref
varvm=newVue({
el:'#app',
data:{},
methods:{
getElement(){
//console.log(document.getElementById('myh3').innerText)
//ref是英文单词【reference】值类型和引用类型referenceError
//console.log(this.$refs.myh3.innerText)
console.log(this.$refs.mylogin.msg)
this.$refs.mylogin.show()
}
},
components:{
login
}
});

总结

以上所述是小编给大家介绍的vue-父子组件和ref实例详解，希望对大家有所帮助！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue-父子组件和ref实例详解

这是子组件

登录组件

热门推荐

随机推荐