vue组件的使用

fuzujian.vue

<template><div><zi :data="data" /></div>
</template><script>
import zi from './zi'
import axios from 'axios'export default {name:"fuzujian",data() {return {data:''}},components:{zi},methods:{get_info(){axios.get("http://127.0.0.1:8000/comment/com/").then(res=>{var mytree = {"id":0,"content":""}mytree["childlist"] = res.data.datathis.data= mytree})}},created(){this.get_info()}
}
</script>fuzujian.vue

zi.vue

<template><div><li><ul >看数据后方可精神崩溃的解放后卡加斯那可就发你</ul></li></div>
</template><script>
export default {name:"zi"}
</script><style>ul{list-style: none;/* padding-left: 20px */
}</style>zi.vue

父组件给子组件传参
定义参数和方法

父组件给子组件传参

子组件引用父组件的参数和方法

子组件接收父组件动态的值需要用watch监控
zi.vue

<template><div><input  type="button" value="给父组件传递值"><li><ul v-for="i in num" :key="i.name">{{i.name}}</ul></li>{{zi1}}{{zi2}}<!-- {{zi11}}{{zi22}} --></div></template><script>
export default {name:"zi",props:["zi1","zi2"],data() {return {num : [{"name":"uzi"},{"name":"ming"},{"name":"xiaohu"},],// zi11 : zi1,// zi22 : zi2}},watch:{zi1(val){},zi2(val){}},methods: {},}
</script><style>ul{list-style: none;/* padding-left: 20px */
}</style>zi.vue

fu.vue

<template><div><zi :zi1="zi1" :zi2="zi2"></zi><input type="button" @click="change_info()" value="改变"></div>
</template><script>import zi from './zi'export default {name:"fu",data() {return {data:[],zi1:12,zi2:34}},components:{zi},methods:{change_info(){this.zi1 = 100this.zi2 = 900console.log(this.zi1,this.zi2)},},}
</script>fu.vue

子组件上使用父组件传递的数据和方法

子组件给父组件传参

传递数据：子组件主要通过事件传递数据给父组件
　　子组件定义一个方法，方法中通过this.$emit(‘transferNum’,this.num)方式发送数据num，父组件中监听transferNum事件，当事件触发时，执行函数，进行赋值。

子组件的数据和发送数据方法：
　　
父组件中监听子组件中发送函数的方法，并赋值

这样在父组件中就可以使用子组件中的num这个数据了。

传递方法：子组件定义好方法，父组件在引用子组件的时候在自定义标签中添加标识符，ref=”child1”，用来表示这个子组件。父组件在methods中定义自己的方法名，方法主this.refs.child1.fun。意思是通过调用refs.child1.fun。意思是通过调用refs.child1.fun。意思是通过调用refs中名字叫child1的子组件里的fun方法，赋值给父组件。
　　子组件定义方法：
　　
父组件中引用子组件时，添加一个标识符rel=’abc’,注意rel是语法，abc是标识

父组件中定义一个方法，主体内容如图，表示方法就是标识为aaa的子组件里的setFun方法

　　调用gerFun方法
　　

<template><div><input @click="setNum" type="button" value="给父组件传递值"><li><ul v-for="i in num" :key="i.name">{{i.name}}</ul></li></div>
</template><script>
export default {name:"zizujian",props:["data"],data() {return {num : [{"name":"uzi"},{"name":"ming"},{"name":"xiaohu"},]}},methods: {setNum(){this.$emit('func',this.num)},setFunc(){alert("我最喜欢的选手是"+this.num[0]["name"] )}},}
</script><style>ul{list-style: none;/* padding-left: 20px */
}</style>zizujian.vue

<template><div><p @click="getFunc">peter的测试父组件</p><zizujian @func="getNum"  ref="abc" ></zizujian></div>
</template><script>import zizujian from './zizujian'
import axios from 'axios'export default {name:"showzi",data() {return {data:[]}},components:{zizujian},methods:{getNum(val){this.data=valconsole.log(val)},getFunc(val){this.$refs.abc.setFunc(val)}},}
</script>fuzujian.vue

利用父子组件实现无限级评论

<template><div><zi :data="data" /><!-- <zizujian :data="data" /> --></div>
</template><script>
import zi from './zi'
import axios from 'axios'export default {name:"fu",data() {return {data:''}},components:{zi},methods:{get_info(){axios.get("http://127.0.0.1:8000/comment/com/").then(res=>{var mytree = {"id":0,"content":""}mytree["childlist"] = res.data.datathis.data= mytree})}},created(){this.get_info()}
}
</script>fu.vue

<template><div><li>{{data.content}}<ul v-if="data.childlist && data.childlist.length>0"><zi v-for="i in data.childlist" :key="i.id" :data="i" /></ul></li></div>
</template><script>
export default {name:"zi",props:["data"]
}
</script><style>ul{list-style: none;/* padding-left: 20px */
}</style>zi.vue

from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from .serializers import CommentSer
from .models import Comments

Create your views here.

def change_comments(data):
list = []
tree = {}
root = ‘’
p_id = ‘’

for i in data:#将data循环，然后加入一个dict中，key为每条数据的ID，val对应为整条数据tree[i["id"]] = i# print(tree)for i in data:print(i)if i["p_id"] == None:root = tree[i["id"]]  #i.di为tree里的key，将key对应的val取出list.append(root)else:p_id = i["p_id"]# 判断父级是否有孩子字段（childlist），如果有将当前数据加入，如果没有添加（childlist）后再加入if "childlist" not in tree[p_id]:tree[p_id]['childlist'] = []tree[p_id]["childlist"].append(tree[i["id"]])return list

class CommentView(APIView):

def get(self,request):comments = Comments.objects.filter()comment_ser = CommentSer(comments,many=True)print(comment_ser.data)data={"code":200,"data":change_comments(comment_ser.data)}return Response(data,status=200)

views.py

vue-父子组件传参以及无限级评论相关推荐

vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
【Vue3】第十四部分父子组件传参
[Vue3]第十四部分父子组件传参文章目录 [Vue3]第十四部分父子组件传参 14. 父子组件传参 14.1 父传子(props) 14.2 子传父(emit) 14.3 子传父(ref) 总 ...
vue2 父子组件传参回调函数使用
关键点: 父组件给子组件动态传参使用v-bind:属性key(多个单词用下划线拼接) 子组件接收父组件传参参数使用 props标签,+属性key多个单词用驼峰形式拼接) 子组件定义回调父组件函数子组 ...
Vue 路由组件传参的 8 种方式
我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router ...
VUE父子组件-传数据的理解
1.概述. 父组件对子:利用props接收参数.应用场景:对于可复用的子组件,传参使子组件复用. 子向父传递:利用事件机制.在子组件触发事件时,利用emit设置传的参数以及对应的函数名发送给父组件内的 ...
VUE中父子组件传参（简单明了）
· 父组件向子组件传递参数 child.vue如下 <template><div class="childClass"><h3>子组件内容< ...
【vue2】子组件向父组件传参方法汇总
一.前言最近在复习vue,总结一下父子组件通信的方式.希望能够一起进步. 二.代码 1.项目介绍有三个子组件,School.vue.Student.vue.Grade.vue.其中App.vue引 ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
Vue学习（组件传参）-学习笔记
文章目录 Vue学习(组件传参)-学习笔记父到子子到父父操作子-ref(类似于操作dom) 兄弟之间传参 Vue学习(组件传参)-学习笔记父到子 Father:(index) <temp ...

vue-父子组件传参以及无限级评论

子组件给父组件传参

Create your views here.

vue-父子组件传参以及无限级评论相关推荐

最新文章

热门文章