vue基础——组件、组件外部配置、组件的属性、refs、

最新推荐文章于 2024-05-16 14:17:40 发布

yzbyf

最新推荐文章于 2024-05-16 14:17:40 发布

阅读量386

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yzbyf/article/details/134631801

版权

组件

组件，将来项目开发的时候使用的都是组件，组件具有极高的复用性

注册组件：
外部注册组件的关键字是 component,在实例内部注册组件，属性名为 components
app.component(组件名，组件的配置)

组件的命名：
1.命名不能和原生html冲突
2.可以使用驼峰，使用驼峰的时候，最好在视图模板中书写，驼峰的大写字母可以变为-，例如：abCd,使用的时候
3.推荐使用 w3c的命名规则：aa-bb

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <abc></abc>
        <abc></abc>
        <my-show></my-show>
        <my-run></my-run>
    </div>
</body>

<template id="run">
    <h1>辛弃疾</h1>
    <h2>刘永</h2>
    <h2>{{name}}</h2>
</template>
<script type="module">
import {createApp} from './js/vue.esm-browser.js'
let app=createApp({
    data(){
        return{
            name:'袁世凯'
        }
    },
    //实例的内部注册组件
    components:{
        //驼峰，使用的时候需要 my-show
        'myShow':{
            //配置模板
            template:'<p class="abc">最喜小儿无赖-{{name}}</p>',
            data(){
                return{
                    name:'孙仲谋'
                }
            }
        },
        //w3c 推荐
        'my-run':{
            template:'#run',
            data(){
                return{
                    name:'元神',

                }
            }
        }
    }
});
//外部注册
app.component('abc',{
    template:`
    <h1>相顾无言，惟有泪千行</h1>
    <h1>相顾无言，惟有泪千行</h1>  
    `
});
app.mount('#app');
</script>

外部配置组件

<body>
    <div id="app">
        <abc></abc>
        <abc></abc>
    </div>
</body>

<template id="abc">
   <h1>郑州科技学院-郑科公园</h1>
   <h1>我在郑科很想你{{num}}</h1>
   <button @click="add">点击++</button>
   <aa></aa>
</template>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
//创建组件 abc
let abc={
    template:'#abc',
    data(){
        return{
            num:100
        }
    },
    methods:{
        add(){
            this.num++;
        }
    },
    mounted(){
        this.add();
    },
    components:{
        aa:{
            template:'<h4>组建内部的内容-郑科还行吧</h4>'
        }
    }
};
createApp({
    data() {
        return {
        }
    },
    components:{
        abc:abc
    }
}).mount('#app');
</script>

组件的属性

<body>
    <div id="app">
        <h2>{{msg}}</h2><hr/>
        <show abc="陆虞侯火烧草料厂" aa="柴进" :obj="{name:'孙悟空',age:1000}"></show>
    </div>
</body>

<template id="show">
    <p>水浒传</p>
    <!-- 直接引用属性的值 -->
    <h2>{{abc}}</h2>
    <h2>{{aa}}</h2>
     <h2>{{obj.name}}</h2> 
</template>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
createApp({
    data(){
        return{
            msg:'林教头风雪山神庙'
        }
    },
    //组件 components组件名
    components:{
        show:{
            template:'#show',
            //给组件设置属性,属性名设置在一个数组中，简写
            // props:['abc','aa','obj']
            //设置属性的具体类型，设置属性的多样性
            props:{
                abc:{
                    //设置属性abc的值，必须是一个字符串
                    type:String
                },
                aa:{
                    type:String,
                    //设置为必写属性
                    required:true,
                    //设置属性的默认值，当属性没有值的时候，默认显示的内容
                    default:'中午吃啥'
                },
                obj:{
                    type:Object,
                    //设置默认值，对象类型的默认值是一个函数，返回一个默认对象
                    default(){
                        return{
                            name:'卫青',
                            age:20
                        }
                    }
                }
            }
        }
    }
}).mount('#app');
</script>

refs

组件中，通过 this. $re f s 获取所有携带 re f 属性的子组件实例， t hi s .$ refs是一个集合
this.$refs.aa 就可以获取 ref=“aa” 的组件实例

 methods:{
        change(){
            //获取组件实例
            console.log(this.$refs.son);
            //执行组件实例中的方法
            this.$refs.son.add();
            this.$refs.wp.innerHTML=this.$refs.son.num;
        }
    }

yzbyf

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
vue基础——组件、组件外部配置、组件的属性、refs、

2.可以使用驼峰，使用驼峰的时候，最好在视图模板中书写，驼峰的大写字母可以变为-，例如：abCd,使用的时候。外部注册组件的关键字是 component,在实例内部注册组件，属性名为 components。this.$refs.aa 就可以获取 ref=“aa” 的组件实例。组件，将来项目开发的时候使用的都是组件，组件具有极高的复用性。app.component(组件名，组件的配置)3.推荐使用 w3c的命名规则：aa-bb。1.命名不能和原生html冲突。组件中，通过 this.
复制链接

扫一扫