vue学习笔记10-组件

vue最强大的功能之一,扩展html元素,封装代码。 语法:

Vue.component(tagName, options)

之后就可以在html中<tagName></tagName>来使用它。 自定义组件也分为全局和局部两种,全局可以在任何实例中使用,而局部只有注册后才能使用。 全局:

<body>
    <div id="app">
        <test></test>
    </div>
</body>
<script>
    Vue.component('test',{
    })
    new Vue({
        el : '#app'
    })
</script>

运行后从控制台可以看见报错信息。

[Vue warn]: Failed to mount component: template or render function not defined.

所以如果就这样空着不能算是写完,至少需要在里面写一个template属性,来渲染里面的信息。

Vue.component('test',{
    template : '<h1>test</h1>'
})

之后再运行就可以看见结果。 局部: 使用VUe.定义components为全局,如果在vue实例里面定义想要的组件说明是局部

var test = {
    template : '<h1>test</h1>'
}
new Vue({
    el : '#app',
    components:{
        'test' :  test
    }
})

除了template属性,还有其他属性: Prop 可以用来接收自定义属性,正常态是json数组

<div id="app">
    <test message="ttt"></test>
</div>
Vue.component('test',{
    props : ['message'],
    template : '<h1>{{ message }}</h1>',
})

如果使用v-bind就可以实现动态获取

<div id="app">
    <input type="test" v-model="tworld" />
    <test :message="tworld"></test>
</div>
Vue.component('test',{
    props : ['message'],
    template : '<h1>{{ message }}</h1>',
})
var vm = new Vue({
    el : '#app',
    data : {
        tworld : '这是测试'
    }
})

以上是prop传入json数组的正常态 如果prop传入的是一个对象而不是字符串数组的时候,它就能进行验证。 主要作用是可以进行一个预先检查,避免出现预料之外的错误

<div id="app">
    <test :message="tworld"></test>
</div>
Vue.component('test',{
    props : {
        'message' : Number
        },
    template : '<h1>{{ message }}</h1>',
})

如果message接受到的值不是number类型了话控制台就会报错

[Vue warn]: Invalid prop: type check failed for prop "message". Expected Number, got String.
found in
---> <Test>
       <Root>

就可以避免在开发过程中乱传变量类型。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【Go 语言社区】在golang里实现类似try catch 的异常处理机制

此文介绍的并非 使用panic/recover. 因为实际使用中不建议使用panic/recover. 但try catch finally 的编程方式 还是...

38460
来自专栏简书专栏

基于bs4+requests爬取世界赛艇男运动员信息(进阶篇)

在详情页面,部分页面具有5个字段信息,部分页面具有2个字段信息。 每个字段信息都在li标签中,对每个li标签做循环遍历。 将li标签中的第1个class等于...

8320
来自专栏河湾欢儿的专栏

第三节 json数据绑定以及dom回流重绘、映射

16020
来自专栏谈补锅

开发中常用的JS知识点集锦

9620
来自专栏LeoXu的博客

Flex笔记_MX DataGrid、列表和树

columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFun...

12120
来自专栏JadePeng的技术博客

Angular快速学习笔记(3) -- 组件与模板

19930
来自专栏vue学习

vue实例-vue官网学习笔记

1、构造器 ①每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的:

13310
来自专栏葡萄城控件技术团队

如何将第三方控件嵌入ToolStrip控件,并提供Design-Time支持

最近研究了一下如何将第三方控件嵌入到ToolStrip控件中,并能提供Design-Time下的支持. 下面将详细讲解如何把系统的MonthCalendar控件...

21880
来自专栏liulun

自己动手写UI库——引入ExtJs(布局)

第一:来看一下最终的效果 ? 第二:来看一下使用方法: ? 第三: Component类代码如下所示: public class Compo...

21550
来自专栏彭湖湾的编程世界

【Vue】详解Vue组件系统

Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组...

309110

扫码关注云+社区

领取腾讯云代金券