摘要：组件上一篇的表单输入绑定使用组件注册组件首先我们要创建一个实例要注册一个全局组件，你可以使用。使用传递数据组件实例的作用域是孤立的。这意味着不能也不应该在子组件的模板内直接引用父组件的数据。
组件
使用组件 注册组件上一篇：Vue的表单输入绑定：https://segmentfault.com/a/11...
首先我们要创建一个实例：
new Vue({
el:".exp",
// ......
})
要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如：
Vue.component("my-component", {
// 选项
})
组件在注册之后，便可以在父实例的模块中以自定义元素 < my-component >< /my-component > 的形式使用。要确保在初始化根实例之前注册了组件：
渲染结果：
这是一个组件
对于自定义标签名，Vue.js 不强制要求遵循 W3C 规则 (小写，并且包含一个短杠)，尽管遵循这个规则比较好。
我们知道，在创建的实例里面是有data数据的，其实在组件里也可以写数据：
Vue.component("my-component"{
templent:"",
data:function(){
return{
msg:"hello"
}
}
})
注意！组件里的data必须是一个函数，并将属性返回
局部注册不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：
渲染结果和上一个例子是一样的。
我们来看看全局注册和局部注册的区别：
局部注册的组件，只能在 .exp1 内使用，拿给 .exp 是不可以的，当然我们把全局注册的组件给 .exp1 ，是可以生效的。
DOM 模板解析说明当使用 DOM 作为模板时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素 < ul >，< ol >，< table >，< select > 限制了能被它包裹的元素，而一些像 < option > 这样的元素只能出现在某些其它元素内部。
比如：
如上，这样的写法在DOM里渲染时会反正错误：
...
为了解决，就需要使用 is 属性
有时候我们可能要在组件里写很多的标签，如果统统像上面那样写的话，看起来很费劲，这时候就可以使用模板字符串：
< script type="text/x-template" >< /script >
这样写的话就比较直观了。
Prop 使用 prop 传递数据组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。
子组件要显式地用 props 选项声明它期待获得的数据：
在上面的例子中，我们要在子组件 tk 里传一个参数，就需要使用 prop 属性.
这种方式是静态绑定的方法，还有就是利用 v-bind 指令进行动态绑定：
驼峰式命名和短横线隔开式命名
HTML 特性是不区分大小写的。所以，当使用的不是字符串模板，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：
ue.component("child", {
// camelCase in JavaScript
props: ["myMessage"],
template: "{{ myMessage }}"
})
自定义事件 使用 v-on 绑定自定义事件
每个 Vue 实例都实现了事件接口 (Events interface)，即：
$on(enentName) 监听事件
$emit(eventName) 触发事件
我们可以使用 $emit 来用子组件触发父组件的事件：
当我们点击第二个按钮时，就会触发父组件内的 alert 事件。
其实我们也可以传递参数，由父组件接收：
this.$emit("jieshou","abc")
非父子组件通讯
有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：
使用 Slot 分发内容
这部分官方文档说的有点啰嗦，我这边就合到一块说吧。直接上个例子：
Slot内容分发
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的 元素作为原始内容的插槽。
分发完成
< slot >被成为插口，在组件中，我们需要使用 slot 插口预留一个位置，以方便分发内容。如上，在放置正文内容的地方，我们直接插入一对 slot 标签标记出正文内容的位置。对于页面标题和页脚等特殊的位置，我们就需要"具名Slot"，用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。
To be continue......上一篇：Vue的表单输入绑定：https://segmentfault.com/a/11...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88346.html
摘要：组件基础与通信一脚手架简介与安装之前安装的是模块，之后安装的是模块。如果是三级组件通信，该如何处理比如父组件与孙子组件通信。和，提供和注入实现祖先组件和后代组件之间通信。 Vue组件基础与通信 一、vue cli脚手架 ① vue cli 简介与安装 vue cli 3.0之前安装的是vue-cli模块，vue cli 3.0之后安装的是@vue/cli模块。如果已经全局安装了旧版本的...
摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。 学习笔记：组件详解 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...
摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...
摘要：官方推荐的风格指南个人笔记最近刚注意到官方多了一个风格指南的推荐。中始终用组件命名因为官方推荐风格命名，所以能用就用组件命名单词应该是完整的单词完整单词带易读性的好处，和书写麻烦的缺点。 Vue官方推荐的风格指南-个人笔记 最近刚注意到vue官方多了一个vue风格指南的推荐。 因为业务中一直用的vue，所以梳理学习一下，来增加自己代码的规范性，效果不错也可以安利到团队。 文档没有对JS...
阅读 2442·2023-04-26 02:17
阅读 1438·2021-11-24 09:39
阅读 948·2021-11-18 13:13
阅读 1991·2021-09-02 15:11
阅读 2654·2019-08-30 15:48
阅读 3296·2019-08-30 14:00
阅读 2299·2019-08-29 13:43
阅读 570·2019-08-29 13:07
