码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-10 13:37:18      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:this   call   comment   order   事件   str   round   响应   active   

(一) 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>

 

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

标签:this   call   comment   order   事件   str   round   响应   active   

原文地址:https://www.cnblogs.com/dopocheng/p/12270084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!