06每周测试

# 每周测试06

# 1、使用vue代码写出作用域插槽的案例

<div id="app">
	<my-component1 v-slot='{data}'>{{data}}</my-component1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
let myComponent1 = {
    template: `<div><slot :data='msg'></slot></div>`,
    data() {
        return {
            msg: '子组件数据'
        }
    }
}
new Vue({
    el: '#app',
    data: {},
    components: {
    	myComponent1,
},})
</script>

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

# 2、vue中如何更新数组或者对象的渲染

this.$set(this.arr,5,"x")

# 3、请用vue代码写出eventBus订阅发布模式案例

<div id="app">
    {{fathermsg}}
    <my-component1></my-component1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
    Vue.prototype.$eventBus = new Vue()
    let myComponent1 = {
        template: `<div>子组件a<button @click='send'>发送</button></div>`,
        data() {
            return {
                msg: '子组件的数据'
            }
        },
        methods: {
            send() {
                this.$eventBus.$emit('childeven', this.msg)
            }
        },
    }
    new Vue({
        el: '#app',
        data: {
            fathermsg: ''
        },
        components: {
            myComponent1,
        },
        created() {
            this.$eventBus.$on('childeven', e => {
                this.fathermsg = e
            })
        },
    })
</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

# 4、vue如何获取父子组件的属性和方法

this.$parent.msg
this.$parent.fn()
this.$children[0].msg
this.$children[0].fn()

1
2
3
4

# 5、请用vue代码写出子组件传数据给父组件案例

<div id="app">
    <my-component1 @childeven='fn($event)'></my-component1>
    {{fathermsg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
Vue.prototype.$eventBus = new Vue()
let myComponent1 = {
    template: `<div>子组件a<button @click='send'>发送</button></div>`,
    data() {
        return {
            msg: '子组件的数据'
        }
    },
    methods: {
        send() {
            this.$emit('childeven', this.msg)
        }
    },
}
new Vue({
    el: '#app',
    data: {
    	fathermsg: ''
    },
    components: {
        myComponent1,
    },
    methods: {
        fn(e) {
            this.fathermsg = e
        }
    },
})
</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

# 6、使用vue代码实现v-model的高级用法（在组件上使用v-model传递数据）

<div id="app">
    <my-component1 v-model='num'></my-component1>
    {{num}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
Vue.prototype.$eventBus = new Vue()
let myComponent1 = {
    template: `<div>子组件a<button @click='change'>发送</button></div>`,
    data() {
    return {
        childnum: this.num
    }
    },
    props: ['num'],
    model: {
        prop: 'num',
        event: 'childeven'
    },
    methods: {
    change() {
        this.childnum++
        this.$emit('childeven', this.childnum)
    }
    },
}
new Vue({
    el: '#app',
    data: {
    	num: 1
    },
    components: {
    	myComponent1,
    },
    methods: {},
})
</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

# 7、请用代码写出，vue中子组件如何传数据给父组件

<div id="app">
    <my-component @childevent=fatherevent($event)></my-component>
</div>

<script>
    let myComponent = {
        template: "<div>子组件<button @click='handler'>按钮</button></div>",
        data() {
            return {
                msg1: "我是子组件1",
                msg2: "我是子组件2",
            }
        },
        methods: {
            handler() {
                this.$emit("childevent", { msg1: this.msg1, msg2: this.msg2 })
            }
        },
    }

    new Vue({
        el: "#app",
        components: {
            myComponent,
        },
        methods: {
            fatherevent(e) {
                console.log(e);
            }
        }
    })
</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

# 8、请用vue代码写出父组件传数据给子组件案例

<div id="app">
    <my-component1 :childmsg='fathermsg'></my-component1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script>
    let myComponent1 = {
      template: `<div>子组件a{{childmsg}}</div>`,
      props: ['childmsg']
    }
    new Vue({
      el: '#app',
      data: {
        fathermsg: '父组件的数据'
      },
      components: {
        myComponent1,
      }
    })
  </script>

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

# 9、请用vue代码写出依赖注入案例

<div id="app">
	<my-component2></my-component2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
let myComponent1 = {
    template: `<div>子组件a{{msg}}</div>`,
    inject: ['msg']
}
let myComponent2 = {
    template: `<div>子组件b<my-component1></my-component1></div>`,
    inject: ['msg'],
    components: {
    	myComponent1
    }
}
new Vue({
    el: '#app',
    provide() {
        return {
            msg: '父组件的数据'
        }
    },
    data: {},
    components: {
    	myComponent2,
    }
})
</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

# 10、在vue2里面v-if和v-for哪个优先级更高？

v-for比v-if优先级高

编辑

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

← 05每周测试 07每周测试→