[Vue] 23.Vue中的组件：查缺补漏

最新推荐文章于 2024-06-04 21:41:16 发布

weiweicn!

最新推荐文章于 2024-06-04 21:41:16 发布

阅读量88

点赞数

分类专栏： Vue 文章标签： vue.js bash linux

本文链接：https://blog.csdn.net/u014627255/article/details/125521160

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

v-once指令：表示元素只被渲染一次，后来即使数据发生变化，也不会被渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // v-once
        const app = Vue.createApp({
            data() {
                return {count: 1}
            },
            template: `
            <div @click="count += 1" v-once>
               {{count}}
            </div>
            `
        });
        // app.component('common-item', {
        //     template: `<div>Hello world</div>`
        // });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

ref: 可通过ref获取dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // ref:获取dom节点的语法
        const app = Vue.createApp({
            data() {
                return {count: 1}
            },
            mounted() {
                console.log(this.$refs.count);
            },
            template: `
            <div>
                <div ref="count">
                    {{count}}
                </div>
            </div>
            `
        });
        // app.component('common-item', {
        //     template: `<div>Hello world</div>`
        // });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
ref还可获取到子组件的引用，通过子组件的引用可调用子组件的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // v-once 让某个元素标签只渲染一次
        const app = Vue.createApp({
            data() {
                return {count: 1}
            },
            mounted() {
                console.log(this.$refs.common.sayHello());
            },
            template: `
            <div>
                <common-item ref="common" />
            </div>
            `
        });
        app.component('common-item', {
            methods: {
                sayHello() {
                    alert('hello');
                }
            },
            template: `<div>Hello world</div>`
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
3. provide/inject解决多层组件传值（一次性的，并非双向绑定）
1）如果不使用provide/inject进行多层组件传值，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {count: 1}
            },
            template: `
            <div>
                <child :count="count" />
            </div>
            `
        });
        app.component('child', {
            props: ['count'],
            template: `<child-child :count="count"/>`
        });
        app.component('child-child', {
            props: ['count'],
            template: `<div>{{count}}</div>`
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

2）若使用provide/reject ，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {count: 1}
            },
            provide: {                                                      // 用来传固定值（与下面二选一）
                count: 1,
            },
            provide() {                                                     // 变成函数，用来传变量
                return {
                    count: this.count
                }
            },
            template: `
            <div>
                <child :count="count" />
            </div>
            `
        });
        app.component('child', {
            template: `<child-child/>`
        });
        app.component('child-child', {
            inject: ['count'],
            template: `<div>{{count}}</div>`
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>