追境的笔记

# 动态挂载组件 $mount (opens new window)


const temp1= document.querySelector('.container-body') // 目标组件
const buttonA = Vue.extend({
    name:'buttonA',
    data() {
        return {
            name:'🍌'
        }
    },
    render() {
        var t = this,
        e = t.$createElement,
        a = t._self._c || e;
        return a(
            "div",
            {
            staticClass: "whithButton div_all_center",
            staticStyle: {
                "margin-left": "20px",
                width: "80px",
            },
            on: { click: t.reset },
            },
            [t._v(" " + t._s('新按钮' + t.name))]
        )
    },
    methods: {
        reset( ){
            window.btn = this
        }
    }
})
buttonB.prototype = Object.assign(buttonB.prototype,temp1.__vue__)

const btn1 = new buttonB().$mount()
temp1.appendChild(btn1.$el)
Object.getPrototypeOf(btn1).swiperOption
****
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

# 替换内容


const temp1= document.querySelector('.banner-container') // 目标组件
const buttonA = Vue.extend({
    name:'buttonA',
    data() {
        return {
            name:'🍌'
        }
    },
    render() {
        var t = this,
        e = t.$createElement,
        a = t._self._c || e;
        return a(
            "div",
            {
            staticClass: "whithButton div_all_center",
            staticStyle: {
                "margin-left": "20px",
                width: "80px",
            },
            on: { click: t.reset },
            },
            [t._v(" " + t._s('新按钮' + t.name))]
        )
    },
    methods: {
        reset( ){
            window.btn = this
        }
    }
})
const btn1 = new buttonA().$mount(temp1)
****
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

# 新增内容


const temp1= document.querySelector('.banner-container') // 目标组件
const buttonB = Vue.extend({
    name:'buttonB',
    data() {
        return {
            name:'🍌'
        }
    },
    render() {
        var t = this,
        e = t.$createElement,
        a = t._self._c || e;
        return a(
            "div",
            {
            staticClass: "whithButton div_all_center",
            staticStyle: {
                "margin-left": "20px",
                width: "80px",
                position:"absolute",
                top: 0,
                zIndex: 999
            },
            on: { click: t.getParant },
            },
            [t._v(" " + t._s('新按钮' + t.name))]
        )
    },
    methods: {
        getParant( ){
            console.log('父元素的配置',this.$parent.swiperOption)
        }
    }
})
// 注意这里的区别⚠️⚠️⚠️⚠️
const btn1 = new buttonB().$mount()
btn1.$parent = temp1.__vue__

temp1.appendChild(btn1.$el)
****
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

← 高阶组件 →