加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > Linux > 正文

vue-实例属性 组件通讯

发布时间:2020-12-13 23:44:18 所属栏目:Linux 来源:网络整理
导读:多组件生命周期关系: 父beforeCreate-父created-父beforeMount(子周期)父mounted 子周期: 子beforeCreate-子created-子beforeMount-子mounted 子的created可以拿父的数据了实例属性: $children 父抓子元素 $parent 子抓父元素 父Atemplate div h3CompA数

多组件生命周期关系:
    父beforeCreate->父created->父beforeMount(子周期)父mounted
    子周期: 子beforeCreate->子created->子beforeMount->子mounted
    子的created可以拿父的数据了
实例属性:

    $children 父抓子元素

    $parent 子抓父元素
父A
<template>
    <div>
        <h3>CompA数据</h3>
        <hr>
        <CompB></CompB>
    </div>
</template>
<script>
import CompB from './CompB'
export default {
    name:'CompA',data() {
        return {
        msg:'a数据'
        }
    },methods: {
        show(){
        console.log("a方法")
        }
    },components:{CompB},
mounted() {
    console.log("a抓取b数据",this.$children)
  },}
</script>
子B
<template>
    <div>
        <h3>CompB数据</h3>
        <hr>
        <CompC></CompC>
    </div>
</template>
<script>
import CompC from './CompC'
export default {
    data() {
        return {
            msg:'b数据'
    }
    },methods: {
        show(){
        console.log("b方法")
        }
    },components:{CompC},created() {
        console.log('b抓取a数据',this.$parent)
    },}
</script>


(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读