vue组件命名和props命名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--  post-title使用驼峰命名postTitle会报错 blog-post改为blogPost会报错 -->
        <blog-post post-title="hello!"></blog-post>
    </div>

    <script>
        Vue.component(‘blog-post‘, { //命名时候可以使用横线
          props: [‘postTitle‘],                 //如果这里使用连接线post-title将报错
          template: ‘<h3>{{ postTitle }}</h3>‘
        })

        new Vue({
            el:"#app",

        })
    </script>

</body>
</html>
总结 props里可使用驼峰命名但不能用横线,如果props使用驼峰 组件上将使用横线
    vue组建命名 可以使用驼峰和横线, 如果使用驼峰 组建使用将采用横线使用

原文地址:https://www.cnblogs.com/yangjie-space/p/11441728.html

时间: 2024-11-13 14:26:52

vue组件命名和props命名的相关文章

vue组件通信(props,$emit,$attrs,$listeners)

朝颜陌 vue基础----组件通信(props,$emit,$attrs,$listeners) 一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 1 <body> 2 <div id="app"> 3 <my-father :msg1="msg" a="10" :b="20" @click1=&

vue组件,通过props父组件给子组件传值,WTF, 子组件报错undefined???

如果是正常操作,找了半天又找不到为什么undefined, 那很可能是props的命名出了问题: 不要用小驼峰式命名 例如这种childrenData 这种形式就会报错undefined  请尽量用全小写或者大驼峰式命名就没这个问题啦 原文地址:https://www.cnblogs.com/lml2017/p/10301892.html

vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题 是这样的,先来个话题引入,后面会用到 var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']); 打印出来是  NaN  9 解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,nam

Vue组件 props

组件是Vue最强大的功能之一:组件化编程,允许我们使用小型,独立,通用的可复用型组件构建大型应用:任何页面都可以抽象为组件树: <!-- 组件需要注册后才能使用. 注册有全局注册和局部注册两种方式 全局注册: 全局: 局部注册: 局部: 注册后的组件只是在该作用域下有效 父组件正向的向子组件传递数据和参数 用 props props的值 可以是两种 1,字符串数组 props:['message'] 2,对象 props: {} props中的数据来自父元素.data中的数据来自组件自己的数据.

Vue组件选项props

前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

vue 组件 props 和event

组件是可扩展的HTML元素,封装可重用的代码. 使用祖册的组件,要确保在初初始化根实例之前注册组件 注册的组件中,data必须是函数 父组件通过props向子组件传递数据,子组件通过事件events给父组件发送消息. 组件实例的作用域是孤立的 props是单向绑定的:当父组件的属性变化时,将传递给子组件,但是不会反过来.这是为了防止子组件无意修改父组件的状态:每次父组件更新时, 子组件的所有props都会更新为最新值,这意味着你不应该在子组件内部改变prop,如果你这么做了,Vue会在控制台给出

vue基础----组件通信(props,$emit,$attrs,$listeners)

一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 1 <body> 2 <div id="app"> 3 <my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father> 4 </div>

vue组件最佳实践

看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的.1.让开发者和开发团队更容易发现一些事情.2.让你更好的利用你的IDE.3.让你更加容易的使用打包工具4.让你的代码更容易碎片化以达到复用的目的. 基于模块开发 用一些功能单一的小模块来组织你的应用 Why? 对于你自己和你团队的人来说较小的模块更容易看懂 维护 复用和调试. How? 每个组件应该保持单一 独立 可复用 可测试把你很大的组件拆

JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

阅读目录 一.为什么组件很重要 二.Vue里面的组件基础知识 1.组件的概念 2.组件原理 3.组件使用 三.封装自己的Component 1.使用Component封装bootstrapTable 2.封装select 3.查看其他Vue框架源码 四.总结 正文 前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博