django父子组件

父子组件的调用:

●Import导入子组件

●compants注册子组件

●注册的子组件当做标签来使用

子组件给父组件传参:

●父组件里的子标签里写上要传递的数据 (:子组件的参数名字=父组件的参数名字)●在子组件里注册参数(pros)

●使用父组件传过来的参数

父组件给子组件传参:

●子组件里先用特定的方法来把数据传递给父组件( this, $emit("方法的名字"，要传递的数据) )●父组件的子标签里来接收数据(@子组件的方法=父组件的方法)

●在methods里 接收传过来的val并赋值。

 

代码块

fu.vue

<template>
    <div>
        <!-- 展示子组件内容
        ：后的是子组件里面接收的名字， =后面的是父组件的名字
        @后面的是子组件里定义的名字， =是父组件里获取参数的名字 -->
        <zi :str="str" @change_fu="getzi"></zi>
        <button @click="change_zi()">修改子组件的数据</button>
        {{data}}
        <!-- {{str}} -->
    </div>
  </template>
<script>
import zi from './zi'
export default {
    name:"fu.vue",
    components:{zi},
    data(){
        return{
            str:'',
            data:{}
        }
    },
    methods:{
        change_zi(){
            this.str = "劳资让你干啥，你就得干啥，谁让我是你爹"
        },
        getzi(val){
            console.log(val)
            this.data = val
        }
    }
}
</script>

<style>

</style>

zi.vue

<template>
    <div>
        <li>
            <ul>hahahahhahah</ul>
            {{str}}
            <button @click="send_fu()">把数据传递给父组件</button>
        </li>
    </div>
  
</template>

<script>
export default {
    name:"zi",
    props:["str"],
    data(){
        return{
            data:{"name":"pp"}
        }
    },

    methods:{
        send_fu(){
            console.log(this.data)
            this.$emit("change_fu", this.data)
        }
    }

}
</script>

<style>

</style>