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

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.data
                this.data= mytree
            })
        }
    },
    created(){
        this.get_info()
    }
}
</script>

fuzujian.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

父组件给子组件传参

定义参数和方法

父组件给子组件传参

 

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

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

子组件给父组件传参

传递数据:子组件主要通过事件传递数据给父组件

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

  子组件的数据和发送数据方法:

  父组件中监听子组件中发送函数的方法,并赋值。

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

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

  子组件定义方法:

  父组件中引用子组件时,添加一个标识符rel=’abc’,注意rel是语法,abc是标识

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

  调用gerFun方法

  

原文地址:https://www.cnblogs.com/ppzhang/p/12630857.html

时间: 2024-11-05 18:56:45

vue-父子组件传参以及无限级评论的相关文章

vue 父子组件传参

父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法).而子组件componetA中,声明props参数'msgfromfa'之后,就可以收到父向子组件传的参数了.例子中将msgfromfa显示在<p>标签中.App.vue中 1 1<component-a ms

React(7) --react父子组件传参

react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React from 'react' import ChildCom from './childCom.js' class ParentCom extends React.Component { render() { return ( <div> <h1>父组件</h1> <Chi

前端vue 跨组件传参,cokies,axion

路由跳转 ? 1 2 3 4 5 6 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</rout

1218 组件分类,组件传参

目录 昨日内容 组件 1.概念 2.组件分类 特点 根组件 局部组件 全局组件 3.组件传参 父传子 子传父 作业 Vue项目环境的搭建 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue基础总结 昨日内容 """ 1.表单指令: v-model="变量" 变量与value有关 普通:变量就代表value值 单选框:变量为多个单选框

vue组件传参

一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以直接用<自定义标签></自定义标签>样子使用.当前组件为父组件,被引入的组件为子组件. 引入子组件 注册子组件 使用子组件 1.2.特殊父子组件 在路由中定义好组件,组件中含有children,页面上通过<router-view></router-view>形式

从 Vue 的视角学 React(四)—— 组件传参

组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式,和各自的优缺点 一.父组件传参到子组件 和 Vue 一样,React 中从父组件到子组件的传参也是通过 props 不过在 Vue 项目中,需要在先组件里定义将要接收的 props,而 React 可以直接获取 而且 props 不光可以接收 Number.String 等基本类型,还可以接收 Fu

Vue 子组件向父组件传参

直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"><

第八篇:Vue组件传参

组件传参 父传子 1)在子组件内部通过props设置组件的自定义属性 props: ['abc', 'goods'] 2)在父组件渲染子组件是对自定义属性赋值即可 <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/> 示例代码: 子组件示例代码 <template> <div class="goods-box">

【转】vue父子组件之间的通信

vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).v