Vue组件化编程②

Vue组件化编程②

文章目录

​​组件的几个注意点​​

​​组件的命名方式​​​​组件标签的写法​​​​创建组件的简写方式​​

​​组件的嵌套​​

组件的几个注意点

组件的命名方式

如果是一个单词组成的，Vue官方推荐两种写法：

全部小写。例如：school首字母大写(能跟开发者软件的呈现形式呼应上)。例如：School

如果是多个单词组成的，Vue官方推荐两种写法：

(kebab-case命名)多个单词全部都小写，并且单词之间用​​-​​做连接(如此在js中不能使用简写形式，要完整的加引号)。例如：my-school(CamelCase命名)每一个单词的首字母都大写，包括第一个单词(只能在脚手架的环境中使用，否则报错)。例如：MySchool

组件标签的写法

组件标签有两种写法：

普通写法 例如：自闭和写法 例如：

创建组件的简写方式

const school = Vue.extend(options) 可简写为：const school = options

组件的嵌套

我们通过前面的这个案例，完成组件的嵌套：

打开Vue的开发者工具我们可以看到两个组件的关系是平级的。

如果使用组建的嵌套来写，代码如下：

注意：因为student组件是在school组件中注册的，所以如果在root容器中写是没用的，因为root容器被vm接管，而你在vm中没有注册student。在哪里注册就在哪里用，因为注册在school组件中，所以我们只能在school组件的template模板中使用school组件。

可以发现student是嵌套在NEFU中的。

我们在开发中会定义这么一种组件，这个组件的名字叫​​app​​，这个组件的作用是管理应用里面所有的组件。也就是说vm只需要管理app这么一个组件。可以说app组件是一人之下万人之上。

现在我们来创建这样一个app组件，代码如下：

当然我们也可以在root容器中什么也不放，在vm中使用模板，代码如下：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。