Vue的自定义组件

自定义组件的作用是为了提高复用性,减少重复的代码,提高可维护性

全局组件

语法:vue.component(“自定义组件名称”,{自定义组件结构})

vue.component("自定义组件名称",{自定义组件结构})

使用全局组件的几个步骤

1. 定义组件 vue.component(

2. 编写组件 template id=

3. 调用组件 <“自定义组件名称”></”自定义组件名称””>

 <div id='app'>
        <!-- 2.使用组件 -->
        <myheader></myheader>
        <myheader></myheader>
        
    </div>
   -----------------------------
    <div id='app2'>
        <!-- 5.全局组件可以跨元素使用 -->
        <myheader></myheader>
    </div>
   -----------------------------
    <!-- 3.组件模板,使用id进行绑定 -->
    <template id="test">
        <div>
            <header>头部标签</header>
            <h1 @click=fn()>标题标签</h1>
        </div>
    </template>
​
    <script>
        //1.定义组件
        Vue.component("myheader", {
  //2.编写组件
            template: "#test",   //绑定模板值
            data() {  return {info: 'hello'} },
            methods: {
                fn() {console.log("ok");
           }}})
        new Vue({
            el: '#app',
            data: {
           }})
        new Vue({
            el: '#app2',
            data: {
           }})
 </script>

使用组件需要注意的点:

• 全局组件可以跨元素使用,但局部组件不行

• 建议使用小写,若使用大写则需要在大写字母前加上”-” 例: <my-Header></my-Header>

• 组件内也可以使用data与methods来为组件内的元素与方法进行绑定

• 模板绑定的是ID而不是组件名称

• components与New Vue({ })是同级的

局部组件

语法:

 components:{
            组件名:{
               配置}}

使用全局组件的几个步骤

1. 定义组件 vue.component(

2. 编写组件 template id=

3. 调用组件 <“自定义组件名称”></”自定义组件名称””>

<div id='app'>
        <!-- 3.调用组件 -->
        <myheader></myheader>
    </div>  
    <div id='app2'>
        <myheader></myheader>
    </div>  
    <!-- 2.定义模板内容 -->
    <template id="myT">
        <div>
            <header>头部--{{msg}}</header>
        <h1 @click="fn">标题标签</h1>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{     },
            //1.定义组件
            components: {
                myheader: {
                    template: '#myT',
                    data() { return { msg: 'hello'} },
                    methods: {
                        fn() {
                            console.log(this.msg);
                       }}}}})
        new Vue({
            el: '#app2',
            data: {   }})
</script>

使用组件需要注意的点:

• 因为局部组件存在作用域,不是绑定元素调用此组件即无法使用

• 模板中只能够有一个根节点

• components与data和methods是同级的

•  

今天的文章vue自定义组件v-model的实现_vue内置组件分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。