17处理边界情况

# 处理边界情况

# 获取父组件的数据和方法

<mycomponent></mycomponent>

let mycomponent = {
  template: `<div></div>`,
  created() {
    console.log(this.$parent._data.msg)//获取父组件的数据
    this.$parent.fn()//执行父组件的方法
  },
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent,
  },
  data:{
    msg:"父组件的数据"
  },
  methods: {
    fn(){
      console.log("这是父组件的方法")
    }
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

%accordion% 获取父组件的数据和方法🚀 %accordion%

<div id="app">
    {{msg}}
    <my-component1></my-component1>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        template: "<div>👦我是子组件</div>",
        created() {
            this.$parent.change();//执行父组件的方法
        },
    };

    //父组件
    new Vue({
        el: "#app",
        data: {
            msg: "👨我是父组件"
        },
        components: {
            myComponent1,
        },
        methods: {
            change() {
                this.msg = "👨父组件的数据进行修改..."
            }
        },
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

%/accordion%

# 获取子组件的数据和方法

<mycomponent ref="a"></mycomponent>

let mycomponent = {
  template: `<div></div>`,
  data(){
    return{
      msg:"子组件的数据"
    }
  },
  methods: {
    fn(){
      console.log("子组件的方法")
    }
  },
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent,
  },
  // created() {//这个时候还没有渲染组件，所以无法获取
  //   console.log(this.$children)
  // },
  mounted() {
    console.log(this.$children[0]._data.msg)
    this.$children[0].fn()

    console.log(this.$refs.a._data.msg)
    this.$refs.a.fn()
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

%accordion% 【mounted】获取子组件的数据和方法🚀 %accordion%

<div id="app">
    <my-component1></my-component1>
    <my-component2></my-component2>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        template: "<div>👦我是子组件1</div>",
        //获取数据
        data() {
            return {
                msg: "我是子组件的数据",
            };
        },
    };

    let myComponent2 = {
        template: "<div>👧我是子组件2</div>",
        data() {
            return {
                msg: "我是子组件的数据",
            };
        },
    };

    //父组件
    new Vue({
        el: "#app",
        data: {},
        components: {
            myComponent1,
            myComponent2,
        },
        // created() {//这个时候还没有渲染组件，所以无法获取
        //    console.log(this.$children)
        // },
        mounted() {//渲染之后就可以获取得到了
            console.log(this.$children);
        },
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

%/accordion%

%accordion% 【created】获取子组件的数据和方法🚀 %accordion%

<div id="app">
    <my-component1></my-component1>
    <my-component2></my-component2>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        template: "<div>👦我是子组件1</div>",
        //获取数据
        data() {
            return {
                msg: "我是子组件的数据",
            };
        },
    };

    let myComponent2 = {
        template: "<div>👧我是子组件2</div>",
        data() {
            return {
                msg: "我是子组件的数据",
            };
        },
    };

    //父组件
    new Vue({
        el: "#app",
        data: {},
        components: {
            myComponent1,
            myComponent2,
        },
        created() {//这个时候还没有渲染组件，所以无法获取
            this.$nextTick(() => {//事件轮循机制
                console.log(this.$children)
            })
        },
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

编辑

上次更新: 2023/08/06, 00:38:41

← 16动态组件 18脚手架→