下列关于组件之间传list的描述错误的是+组件之间传list选项对象中的+data+和+Vue+实例选项对象中的？

来源：蜘蛛抓取(WebSpider) 时间：2023-11-14 07:30 标签： 组件之间传list
1.Vue组件名推荐使用大驼峰命名法为什么我们一直在强调 Vue 组件命名使用大驼峰呢???在此之前,我们对 Vue 组件已经有啦一定的了解,我们也知道局部组件的使用频率会高于全局组件,推荐使用大驼峰命名也和我们局部组件的使用有关,接下来我们慢慢分析.我们先写一个简单的组件来观察一下:
在上面的代码中:首先定义了一个选项对象 mycomponent,在 Vue 的实例化对象中将该实例化对象定义为了一个局部组件在html模板中通过标签 使用局部组件在上面的例子中,我们并没有使用驼峰命名法,但是组件一件可以正常使用.那么我们看下面的两点:定义选项对象的时候使用的变量名不能包含连字符,这是标识符的命名规则,毫无疑问,如果我们非要在定义选项对象的时候使用连字符,那么就必须加引号;在上面的代码中,我们在 Vue 的实例化对象中注册组件的时候, componnets 选项中是一个对象, my-component 时我们后面要使用的组件名称, MyComponent 就是我们要注册为组件的选项对象.如果我们的选项对象和组件名相同会发生什么事呢,在es6中我们知道,如果对象中的属性名和属性值相同的时候,我们就可以简写,想下面这样:const vm = new Vue({ el:"#app", components: { //普通写法 MyComponent: MyComponent //es6的写法 MyComponent } }) 所以有没有发现我们为什么要腿甲使用驼峰命名法,从这里就可以看出来了吧.当我们定义组件的选项对象的时候使用驼峰命名,就是说和需要被注册为组件的选项对象和组件名字一致的时候,注册组件将会变得很简单.但是我们通常不会只注册一个组件,当我们需要注册多个组件的时候,就可以按照下面这种写法: let vm = new Vue({ el:"#app", //2. 将选项对象注册为局部组价 components:{ first,second,three } }) 怎么样,代码有没有变得比以前优雅很多.总结:1. 定义组件时最好使用驼峰命名2. 注册组件的时候,最好让组件名和即将被注册为组件的选项对象名称一致3. 在 html 总使用组件的时候使用连字符2.template选项虽然有语法糖简化了组建的注册,但是在 template 选项中拼接 HTML 元素依旧比较麻烦,这也导致了 html 和 JavaScript 的耦合性太高.Vue.js提供了两种方法将定义在 JavaScript 中的 html 分离出来.2.1 使用 Script 标签分离使用 script 标签分离 JavaScript 内的 html 的内容,此时 script 标签内会有一个 id 属性,通过这个 id 关联.
在我们已经了解了组件基本使用之后,选择使用 script 标签或者是 template 标签来分离内容这种方式会更好一些,折让我们的 html 代码和 JavaScript 代码之间是相互分离的,更有利于我们的维护.3. 组件选项中的特例组件中的选项基本与实例选项对象一致, 但是有两个选项是特例,分别为el 和 data 属性.这两个选项在在选项对象和实例对象中的使用方式是不同的.3.1 组件选项中没有elel 属性在实例对象中的作用我们是了解的,他用来绑定我们的 Vue 实例将来要接管的 DOM 元素,而我们的组件是在实例中使用的,所以并不需要指定 el.如果我们强行为它绑定 el 则会报错.所以要记住的是组件的选项对象中没有 el 属性.3.2 组件中的data属性为什么是一个函数???组件中的data选项必须是一个函数,返回一个数据对象他为什么不是和vue的实例化选项中一样是一个函数呢?我们看下面的内容3.2.1 组件中的data是对象的情况不能使用对象的原因:组件中会被重复多次调用而对象是引用数据类型,如果组件数据使用对象的话,那么组件所有的复用都共享这些数据.看下面的代码:
虽然按照我们的想法实现了,但是有没有发现, tr 标签竟然在 table 标签的外面,我们使用这个组件的目的就是希望在 table 标签中渲染 tr 标签,结果他跑去外面了…原因在与浏览器规范中 table 标签里面必须放 tr 标签,但是我们放的是 my-component自定义标签,所以在解析的时候就会出问题.当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像
    、
      、、
      、、
此时我们就会发现不仅结果没问题, 编译后标签的嵌套也没有什么问题,因为我们是按照标准在 tbody 标签中使用的是 tr 标签,只不过通过 is 属性将tr标签替换为了组件 my-component 的模板标签.此时 tr标签中没有嵌套内容,所有使用单标签,双标签都可以

我要回帖

更多关于 组件之间传list 的文章

 

随机推荐