vue components 区域注册全局注册与一个样板样例详解

最新推荐文章于 2024-05-11 14:22:46 发布

安果移不动

最新推荐文章于 2024-05-11 14:22:46 发布

阅读量880

点赞数

分类专栏： # vue

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/87934761

版权

vue 专栏收录该内容

106 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
    <style>
        .component{
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<div id="app2">
    <my-component></my-component>
</div>
<script>
  new Vue({
      el:'#app',
      components:{
          //register
          'my-component':{
              template:' <div class="component">A custiom component of Vue!</div>'
          }
      }
  });
  new Vue({
      el:'#app2',
      components:{
          //register
          'my-component':{
              template:' <div class="component">A custiom component of Vue2!</div>'
          }
      }
  });
</script>
</body>
</html>

区域注册就是一个vue下一个值还有一种方法是全局注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
    <style>
        #app{
            margin: 1em;
            font-size: 1.2em;
        }
        .component{
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>

<div id="app2">
    <my-component></my-component>
</div>
<div id="app3">
    <my-component></my-component>
</div>
<script>
    //register
    Vue.component('my-component',{
        template:'<div class="component">A custiom component of Vue!</div>'
    });
    //create root instance
    new Vue({
        el:'#app'
    });
    new Vue({
        el:'#app2'
    });
    new Vue({
        el:'#app3'
    });


</script>
</body>
</html>

这种写法就省了两个vue都写代码

接下来是比较难得样例。可能你现在看不懂。我先贴出来下文，慢慢分解他

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <meta charset="UTF-8">
    <title>Vue - Component System</title>
    <style>
        body {
            font-size: 1.8em;
        }

        #app {
            display: block;
            width: 1000px;
            height: 500px;
            overflow: hidden;
        }

        .header {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: #eee;
        }

        .main {
            position: relative;
            width: 60%;
            height: 100%;
            text-align: center;
            background-color: #fff;
            float: left;
        }

        .aside {
            width: 40%;
            height: 100%;
            line-height: 300px;
            text-align: center;
            background-color: pink;
            float: right;
        }

        .block {
            display: inline-block;
            width: 85px;
            height: 85px;
            background-color: green;
            margin: 20px;
            color: #ffffff;
            font-size: 26px;
            line-height: 85px;
            text-align: center;
        }

    </style>
</head>
<body>
<div id="app">
    <custom-header msg="Header"></custom-header>
    <custom-main></custom-main>
    <custom-aside></custom-aside>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

    <script>
        var CustomBlock = Vue.extend({
            data() {
                return {
                    content: 'b'
                }
            },
            template: '<div class="block">{{content}}</div>',
        });

        var CustomMain=Vue.extend({
            template:'    <div class="main">\n' +
            '        <div style="margin: 10px">Main\n  </div>' +
            '        <custom-block></custom-block>\n' +
            '        <custom-block></custom-block>\n' +
            '        <custom-block></custom-block>\n' +
            '        <custom-block></custom-block>\n' +
            '        <custom-block></custom-block>\n' +
            '        <custom-block></custom-block>\n' +
            '        </div>\n' +
            '  ',
            components:{
                CustomBlock
            }
        });

        var CustomHeader=Vue.extend({
            //template
            // template:'    <div class="header">{{great}}{{msg}}</div>'
            render:function (createElement) {
                return createElement('div',{
                    class:'header'
                },[this.greet,' ',this.msg]);
            },
            data(){
                return{
                    greet:'Hi'
                }
            },
            props:{
                msg:{
                    type:String,
                    default:'Hello'
                }
            }
        });

        var CustomAside=Vue.extend({
            template:'<div class="aside">Aside</div>\n'
        });
        new Vue({
            el:'#app',
            components:{
                CustomMain,
                CustomHeader,
                CustomAside
            }
        });

    </script>
</div>
</body>
</html>

解析：

style 略

h5

<div id="app">
    <custom-header msg="Header"></custom-header>
    <custom-main></custom-main>
    <custom-aside></custom-aside>

</div>

这前面模版已经知道是什么东西了唯有一个msg 我们不知道是咋来的具体分析代码

js

我们可以看到他在这个地方用到了

 var CustomHeader=Vue.extend({
        //template
        // template:'    <div class="header">{{great}}{{msg}}</div>'
        render:function (createElement) {
            return createElement('div',{
                class:'header'
            },[this.greet,' ',this.msg]);
        },
        data(){
            return{
                greet:'Hi'
            }
        },
        props:{
            msg:{
                type:String,
                default:'Hello'
            }
        }
    });

props是啥。。。先不着急从第一个属性慢慢拆解

Vue.extend()

官方地址全局 API

参数：
- {Object} options
用法：

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

<div id="mount-point"></div>

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

结果如下：

<p>Walter White aka Heisenberg</p>

官方地址render

// template:'    <div class="header">{{great}}{{msg}}</div>'
        render:function (createElement) {
            return createElement('div',{
                class:'header'
            },[this.greet,' ',this.msg]);
        },

模版替代方案。他和上面的模版写法的意思是一样的

    data(){
            return{
                greet:'Hi'
            }
        },

data怎么这么写了

我们之前的data 是在Vue类中的。。可以这么写

data:{greet:'Hi'}

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

官方教程：data

终于到我们想解开的问题这里了

 props:{
                msg:{
                    type:String,
                    default:'Hello'
                }
            }

官方说你要懂这个就推荐你学学基础组件

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

那我们先去看看基础组件去吧。。德智体美劳全面学习

。。。。。。。。。学习中。。。。。。。。。。。

看着还挺好玩，，我之前都没看过。

ding 发现一个关于Prop的点击可以打开

通过 Prop 向子组件传递数据

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

My journey with Vue

Blogging with Vue

Why Vue is so fun

然而在一个典型的应用中，你可能在 data 里有一个博文的数组：

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

并想要为每篇博文渲染一个组件：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。

这个又一次体现了双向绑定啊。可与把网络数据返回给html 我们之前用 data 就是把数据发给了html

接着往上往下还有一个

CustomBlock 这个用法我们上述已经讲解

CustomMain 模版套用模版，

CustomAside 直接一个模版更简单

最后一段陌生代码

new Vue({
        el:'#app',
        components:{
            CustomMain,
            CustomHeader,
            CustomAside
        }
    });

这就是使用extend出来的䧋了。也很好理解，至此就讲解完成了

安果移不动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue components 区域注册全局注册与一个样板样例详解

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="https://cdnjs.cloudflare.com/a
复制链接

扫一扫