子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp

Posted 2021-03-11 dopocheng

(一) popsDowm

　　三种方法获取父组件数据：被动获得(1)；主动获取(2)。

　　1.被动获得：

　　　　父组件：v-bind: 绑定变量参数和方法参数；子组件：props 接收参数。可以在模板中直接使用也可以 this.参数 获得

v-bind:name="yourName"	props:[‘name‘]	template: {{name}} js: this.name
v-bind:fatherMeth="regMeth"	props:{fatherMeth: Function}	js: this.fatherMeth()

　　2.主动获取：

　　　　①this.$parent.变量和方法

　　　　　　　this.$parent.yourName;this.$parent.fatherTest().

　　　　　　　　如果获取不到，在父组件将 this 传递给子组件：:father="this"

　　　　　　　this.father.youerName;this.father.fatherTest().

　　　　② 发送 emit 事件

　　　　　　   this.$emit(‘fatherOnEmite‘,this.childVariate)

(二) eventUp:

　　两种方法: 在父组件设置 ref 属性；监听 emit (订阅)。

　　父组件：ref="child1" 

　　　　this.$refs.child1.desc;this.$refs.child1.childTest()

　　父组件：v-on:fatherOnEmite="onEmite"

　　注意：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。updated 不能保证全部组件都加载用 this.nextTick

代码github：https://github.com/dopocheng/alone-part

父组件

<template>
    <div>
        propsParent!!!<br /><br />
        <!-- prop 静态赋值 -->
        <!-- prop 变量动态赋值 yourName、obj-->
        <Compon 
            title="my journey with vue" 
            v-bind:name="yourName" 
            v-bind:student="obj" 
            v-bind:fatherMeth="regMeth"
            :father="this" 
            v-on:fatherOnEmite="onEmite"
            ref="child1"
        /><br />
        <p @click="updated_data_counter">{{updated_data}} 点击 使用 this.$refs 获取子组件数据</p>
    </div>
</template>

<script>
import Compon from ‘../../complex-component/components‘ 
export default {
    components: { Compon },
    data() {
        return {
            yourName: "dpc",
            obj: {
                id: "007AB",
                age: 18
            },
            updated_data: 0
        }
    },
    created() {
    },
    updated() {// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。updated 不能保证全部组件都加载用 this.nextTick
        this.fatherCall()
    },
    methods: {
        fatherTest() {
            console.log("父组件方法")
        },
        fatherCall() {
            // 因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定
            // 1.等待页面渲染完成后再去获取子组件变量和方法
            console.log("***********父组件主动获取***********")
            this.$nextTick(() => {console.log("this.$nextTick 最后调用",this.$refs.child1.desc)})
            this.$nextTick(() => {console.log("this.$nextTick 最后调用"); this.$refs.child1.childTest()})// console.log 无法打印方法
            console.log("***********父组件主动获取 end***********")
        },
        onEmite(arg) {
            // 2. 获取子组件数据
            console.log("父组件注册(订阅) v-on 方法", arg);
        },
        regMeth() {
            console.log("父组件方法直接传入组件");
        },
        updated_data_counter() {
            this.updated_data++
        }
    }
}
</script>

 

　　子组件：

<template>
    <div>
        complex-component components!!!<br /><br />
        <p>{{title}}</p>
        <p>{{name}}</p>
        <p>{{student}}</p>
    </div>
</template>
<script>
export default {
    // props: [‘title‘, ‘likes‘, ‘isPublished‘, ‘commentIds‘, ‘author‘]
    // 注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
    props:{// 一: 被动获得父组件的参数 (v-bind 参数)
        title: {type:String, default:"title", required: true},
        name: {
                type: String, 
                validator: function (value) {
                // 这个值必须匹配下列字符串中的一个,否则控制台有警告
                return [‘dpc‘, ‘warning‘, ‘danger‘].indexOf(value) !== -1
                }
            },
        student: {type:Object, 
                default: function () {
                return { message: ‘not student‘ }
            }},
        fatherMeth: Function,
        father: Object
        
    },
    data() {
        return {
            childVariate: "在子组件调用父组件的oo!!!"  ,
            desc: "父组件调用子组件属性!!!",
        }
    },
    created() { 
        this.passiveGain()
        this.activeAcquirement()
    },
    methods: {
        childTest() {
            console.log("父组件调用子组件方法!!!")
        },
        passiveGain() {
            console.log("***********child passive gain***********")
            //一:被动获得父组件值(通过 v-bind:参数)和方法
            console.log(this.title);
            this.fatherMeth()
            console.log("***********child passive gain end***********")
        },
        activeAcquirement() {
            console.log("***********child active acquirement***********")
            // 二.主动获取父组件变量值或方法
            console.log("主动获取父组件变量值或方法",this.$parent.yourName)
            this.$parent.fatherTest()
            // 1.如果获取不到，就把父组件对象 this 传递给子组件，在子组件接收下 this.father (定义的参数).变量
            console.log("父组件对象 this 传递给子组件",this.father.yourName)
            this.father.fatherTest()  

            // 2.子组件使用 $emit 触发父组件事件
            this.$emit(‘fatherOnEmite‘,this.childVariate)
            console.log("***********child active acquirement end***********")
        }
    }
}
</script>