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

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.data
                this.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">{