Vue3基础学习笔记（三）探索组件9-补充说明

最新推荐文章于 2024-11-02 15:22:06 发布

smellsummer

最新推荐文章于 2024-11-02 15:22:06 发布

阅读量56

点赞数

分类专栏： vue基础学习笔记文章标签：学习笔记 vue.js

本文链接：https://blog.csdn.net/smellsummer/article/details/131400038

版权

vue基础学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

v-once：让某个元素标签只渲染一次

只显示一次值在页面上，之后若是动态修改值也不会进行渲染。(实际值进行了修改)

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{count:1}
        },
        template:`
        <div @click="count += 1" v-once>
            {{count}}
        </div>
        `
    });
    const vm = app.mount('#root');
</script>

运行结果：
在这里插入图片描述

$refs：获取到指定设置ref的Dom节点/组件引用

在某个标签中添加ref="xxx"，之后可通过js中使用$refs.xxx来获取到指定标签
在这里插入图片描述获取count节点

<script>
    const app = Vue.createApp({
        data(){
            return{count:1}
        },
        mounted() {
            this.$refs.count.innerHTML='hello';
        },
        template:`
        <div>
            <div ref="count">
                {{count}}
            </div>
        </div>
        `
    });
    const vm = app.mount('#root');
</script>

获取子组件

<script>
    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</div>`
    });
    const vm = app.mount('#root');
</script>

provide/inject

例题

<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>

若是我们定义了两个子组件，在父组件中使用了第一个子组件，接着在第一个子组件中复用了第二个子组件，此时第二个子组件想要使用父组件中的值就需要一层一层借助通:xx=“xx”+props属性来进行一层层往下传递。

弊端：若是有大量嵌套组件，需要重复进行v:bind以及props设置传参！

父组件定义provide: {}属性，孙子组件或其他子组件使用inject: [‘xx’]即可拿到！

<script>
    const app = Vue.createApp({
        data(){
            return{count:1}
        },
        provide:{
            count:1,
        },
        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>

provide对象想要动态使用this.属性拿到父组件data对象里的值，需要写成如

provide(){ 
	return {xxx=this.xxx}
	}

<script>
    const app = Vue.createApp({
        data(){
            return{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>