摘要：除了监听事件外，还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用。将和合并成，会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。
查看原文站点，更多扩展内容及更佳阅读体验！组件详解 组件与复用
Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。
全局注册
Vue.component("my-component", {});
要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用
Vue.component("my-component", {
template: `这是一个组件`
});
template的DOM结构必须被一个元素包含，缺少会无法渲染并报错。
在Vue实例中，使用components选项可以局部注册组件，注册后的组件只在该实例作用域下有效。
组件中也可以使用components选项来注册组件，使组件可以嵌套。
var Child = {
template: `局部注册组件的内容`
};
new Vue({
el: "#app",
components: {
"my-component": Child
},
});
Vue组件的模板在某些情况下会受到HTML的限制，比如 常见的限制元素还有 除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data、computed、methods等。 但是在使用data时，data必须是函数，然后将数据return出去。 JavaScript对象是引用关系，如果return的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步。 组件不仅要把模板的内容进行复用，更重要的是组件间进行通信。 通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收后根据参数的不同渲染不同的内容或者执行操作。这个正向传递数据的过程通过props来实现。 在组件中，使用选项props声明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。 props中声明的数据与组件data函数中return的数据主要区别就是props的数据来自父级，而data中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template及计算属性computed和方法methods中使用。 由于HTML特性不区分大小写，当使用DOM模板时，驼峰命名的props名称要转为短横线分割命名。 有时候，传递的数据并不是直接写死，而是来自父级的动态数据，这时可以使用指令v-bind动态绑定props的值，当父组件的数据变化时，也会传递子组件。 这里用v-model绑定了父级的数据parentMessage，当通过输入框任意输入时，子组件接收到的props["message"]也会实时响应，并更新组件模板。 业务中会经常遇到两种需要改变prop的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据，引用父组件的prop。 组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关了，只用维护count，这样就可以避免直接操作initCount。 另一种情况就是prop作为需要被转变的原始值传入，这种情况用计算属性就可以。 因为用CSS传递宽度要带单位（px），数值计算一般不带单位，所以统一在组件内使用计算属性。 当prop需要验证时，需要对象写法。 一般当组件需要提供给别人使用时，推荐都进行数据验证。比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。 验证的type类型可以是： String Number Boolean Object Array Function type也可以是一个自定义构造器，使用instanceof检测。 组件关系可分为父组件通信、兄弟组件通信、跨级组件通信。 当子组件需要向父组件传递数据时，就要用到自定义事件。 v-on除了监听DOM事件外，还可以用于组件之间的自定义事件。 JavaScript的设计模式——观察者模式方法： dispatchEvent addEventListener Vue组件的子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件。 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。 总数:{{total}} 在改变组件的data "counter"后，通过$emit()再把它传递给父组件，父组件用@increase和@reduce。$emit()方法的第一个参数是自定义事件的名称。 除了用v-on在组件上监听自定义事件外，也可以监听DOM事件，这时可以用.native修饰符表示监听时一个原生事件，监听的是该组件的根元素。 Vue可以在自定义组件上使用v-model指令。 组件$emit()的事件名时特殊的input，在使用组件的父级，并没有在 v-model还可以用来创建自定义的表单输入组件，进行数据双向绑定。 总数：{{total}} 实现这样一个具有双向绑定的v-model组件要满足下面两个要求： 接收一个value属性 在有新的value时触发input事件 在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景，非父子组件一般有两种，兄弟组件和跨多级组件。 在Vue 1.x版本中，除了$emit()方法外，还提供了￥dispatch()和$broadcast()。 $dispatch()用于向上级派发事件，只要是它的父级（一级或多级以上），都可以在Vue实例的events选项内接收。 此实例只在Vue 1.x版本中有效： {{message}} $broadcast()是由上级向下级广播事件，用法完全一致，方向相反。 这两种方法一旦发出事件后，任何组件都可以接收到，就近原则，而且会在第一次接收到后停止冒泡，除非返回true。 这些方法在Vue 2.x版本中已废弃。 在Vue 2.x中，推荐任何一个空的Vue实例作为中央事件总线（bus），也就是一个中介。 {{message}} 首先创建了一个名为bus的空的Vue实例；然后全局定义了组件component-a；最后创建了Vue实例app。 在app初始化时，也就是在生命周期mounted钩子函数里监听了来自bus的事件on-message，而在组件component-a中，点击按钮后会通过bus把事件on-message发出去。此时app就会接收到来自bus的事件，进而在回调里完成自己的业务逻辑。 这种方法巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。 如果深入使用，可以扩展bus实例，给它添加data、methods、computed等选项，这些都是可以公用的。 在业务中，尤其是协同开发时非常有用，因为经常需要共享一些通用的信息，比如用户登录的昵称、性别、邮箱等，还有用户的授权token等。 只需在初始化时让bus获取一次，任何时间、任何组件就可以从中直接使用，在单页面富应用（SPA）中会很实用。 除了中央事件总线bus外，还有两种方法可以实现组件间通信：父链和子组件索引。 在子组件中，使用this.$parent可以直接访问该组件的父实例或组件，父组件也可以通过this.$children访问它所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件。 {{message}} 尽管Vue允许这样操作，但在业务中，子组件应该尽可能地避免依赖父组件的数据，更不应该去主动修改它的数据，因为这样使得父子组件紧耦合，只看父组件，很难理解父组件的状态，因为它可能被任意组件修改，理想状态下，只有组件自己能修改它的状态。 父子组件最好还是通过props和$emit()来通信。 当子组件较多时，通过this.$children来遍历出需要的一个组件实例是比较困难的，尤其是组件动态渲染时，它们的序列是不固定的。 Vue提供了子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称。 在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内通过this.$refs来访问指定名称的子组件。 Vue 2.x将v-el和v-ref合并成ref，Vue会自动去判断是普通标签还是组件。 当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫做内容分发。
props传递数据、events触发事件和slot内容分发就构成了Vue组件的3个API来源，再复杂的组件也是由这3部分构成。 父组件中的模板： 这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件 父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。 这里的状态showChild绑定的是父组件的数据。 在子组件上绑定数据： 因此，slot分发的内容，作用域是在父组件上。 在子组件内使用特殊的 分发的内容 更多分发的内容 如果没有父组件插入内容，我将作为默认出现。 子组件child-component的模板内定义了一个 作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，就会替换整个 给 正文的内容 更多正文的内容 子组件内声明了3个 如果没有指定默认的匿名slot，父组件内多余的内容都将被抛弃。 在组合使用组件时，内容分发API至关重要。 作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。 来自父组件的内容 {{props.msg}} 子组件的模板，在 父组件中使用了元素，而且拥有一个scope="props"的特性，这里的props是一个临时变量。 template内可以通过临时变量props访问来自子组件插槽的数据msg。 作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项。 子组件my-list接收一个来自父级的prop数组books，并且将它在name为book的slot上使用v-for指令循环，同时暴露一个变量bookName。 作用域插槽的使用场景是既可以复用子组件的slot，又可以使slot内容不一致。 Vue 2.x提供了用来访问被slot分发的内容的方法$slots。 正文的内容 更多正文的内容 通过$slots可以访问某个具名slot,this.$slots.default包括了所有没有被包含在具名slot中的节点。 给组件设置name选项，组件在它的模板内可以递归地调用自己。 组件递归使用可以用来开发一些具有未知层级关机的独立组件，比如级联选择器和树形控件等。 组件的模板一般都是在template选项内定义的，Vue提供了一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当做模板，而不是把它当内容分发，这让模板更灵活。 {{message}} {{msg}} 在父组件中声明的数据message和子组件中声明的数据msg，两个都可以渲染（如果同名，优先使用子组件的数据）。这是内联模板的缺点，就是作用域比较难理解，如果不是非常特殊的场景，建议不要轻易使用内联模板。 Vue.js提供了一个特殊的元素 可以直接绑定在组件对象上： Welcome home! Vue.js允许将组件定义为一个工厂函数，动态地解析组件。 Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。 工厂函数接收一个resolve回调，在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。 异步更新队列 Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所有数据变化。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在一下个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。 Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver，如果都不支持，就会采用setTimeout代替。 $nextTick就是用来确定什么时候DOM更新已经完成。 Vue提供了另一种定义模板的方式，在
在一些非常特殊的情况下，需要动态地创建Vue实例，Vue提供了Vue.extend和$mount两个方法来手动挂载一个实例。 Vue.extend是基础Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象。 如果Vue实例在实例化时没有收到el选项，它就处于“未挂载”状态，没有关联的DOM元素。可以使用$mount手动地挂载一个未挂载的实例。这个方法返回实例自身，因而可以链式调用其他实例方法。 除了以上写法外，还有两种写法： 手动挂载实例（组件）是一种比较极端的高级用法，在业务中几乎用不到，只在开发一些复杂的独立组件时可能会使用。 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/108008.html 摘要：父子组件通信兄弟组件通信跨级组件通信父传子子组件用接收，父组件用发送父组件红楼梦西游记三国演义水浒传子组件子传父子组件用有的版本名称只能小写发送，父组件自定义事件然后在方法中接收父组件不能加括号子组件点击把传给父组件可以传
父子组件通信： props、 $parent / $children、 provide / inject 、 ref 、 $attrs / $listeners
... 摘要：实例化发生了什么详解生命周期本文将对的生命周期进行详细的讲解让你了解一个实例的诞生都经历了什么我在上建立了一个存放笔记的仓库以后会陆续更新一些知识和项目中遇到的坑有兴趣的同学可以去看看哈欢迎传送门实例化一个这是一个方法触发钩子函数组件实例刚
实例化vue发生了什么?(详解vue生命周期)
本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~
我在Githu... 摘要：指令带有前缀，以表示它们是提供的特殊属性。最后，我们需要为赋值世界舞王尼古拉斯赵四世界舞王尼古拉斯赵四初学就到这里了，相信你已经在脑子里确定了的原理的概念也已经非常清楚了，希望你能够在学习的道路上越走越远，最后感谢你的浏览。
vue.js
vue介绍
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量... 摘要：在这一步，实例已完成以下的配置数据观测，属性和方法的运算，事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低
简介
1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点3.可完全组件化开发
特点
1.组件化开发2.完成的Vue.js开发体验(前提是熟悉Vue)3.可使用Vuex管理状态4.Webpack构建项目5.最终H5... 摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。
学习笔记：组件详解
组件详解
组件与复用
Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。
全局注册
Vue.component(my-component, {});
要在父实例中使用这个组件，必须要... 阅读 1463·2021-09-26 09:55 阅读 4894·2021-09-22 15:40 阅读 1888·2019-08-30 15:53 阅读 1376·2019-08-30 11:15 阅读 1608·2019-08-29 15:41 阅读 1747·2019-08-28 18:13 阅读 3016·2019-08-26 12:00 阅读 1572·2019-08-26 10:30内规定只允许是
、 、 等这些表格元素，所以在 内直接使用组件时无效的。这种情况下，可以使用特殊的is属性来挂载组件。
Vue.component("my-component", {
template: `
这里是组件内容`
});
、
、。
{{message}}`,
props: ["message"],
template: `{{message}}`,
data: {
parentMessage: ""
}
Vue.component("my-component", {
props: ["initCount"],
template: `{{count}}`,
data() {
return {
count:this.initCount
}
}
});
Vue.component("my-component", {
props: ["width"],
template: `组件内容`,
computed: {
style: function () {
return {
width: this.width + "px"
}
}
}
});
在JavaScript中对象和数组时引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件。
数组验证
Vue.component("my-component", {
props: {
// 必须是数字
propA: Number,
// 必须是字符串或数字类型
propB: [String, Number],
// 布尔值，如果没有定义，默认值是true
propC: {
type: Boolean,
default: true
},
// 数字，而且是必传
propD: {
type: Number,
default: true
},
// 如果是数组或对象，默认值必须是一个函数来返回
propE: {
type: Array,
default: function () {
return []
}
},
// 自定义一个验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
});
Vue.component("my-component", {
template: `
`,
data() {
return {
counter: 0
}
},
methods: {
handleIncrease: function () {
this.counter++;
this.$emit("increase", this.counter);
},
handlereduce: function () {
this.counter--;
this.$emit("reduce", this.counter)
}
}
});
new Vue({
el: "#app",
data: {
total: 0
},
methods: {
handleGetTotal: function (total) {
this.total = total;
}
}
});
使用v-model
Vue.component("my-component", {
props: ["value"],
template: ``,
methods: {
updateValue: function () {
this.$emit("input", event.target.value)
}
}
});
new Vue({
el: "#app",
data: {
total: 10
},
methods: {
handleReduce: function () {
this.total--;
}
}
});
Vue.component("my-component", {
template: ``,
methods: {
handleDispatch: function () {
this.$dispatch("on-message", "来自内部组件的数据")
}
}
});
new Vue({
el: "#app",
data: {
message: ""
},
events: {
"on-message": function (msg) {
this.message = msg;
}
}
});
var bus = new Vue();
Vue.component("component-a", {
template: ``,
methods: {
handleEvent: function () {
bus.$emit("on-message", "来自组件component-a的内容")
}
}
});
var app = new Vue({
el: "#app",
data: {
message: ""
},
mounted: function () {
var _this = this;
// 在实例初始化时，监听来自bus实例的事件
bus.$on("on-message", function (msg) {
_this.message = msg;
})
}
});
Vue.component("component-a", {
template: ``,
methods: {
handleEvent: function () {
this.$parent.message = "来自组件component-a的内容"
}
}
});
var app = new Vue({
el: "#app",
data: {
message: ""
}
});
Vue.component("component-a", {
template: `子组件`,
data() {
return {
message: "子组件内容"
}
},
});
var app = new Vue({
el: "#app",
methods: {
handleRef: function () {
// 通过$refs来访问指定的实例
var msg = this.$refs.comA.message;
console.log(msg);
}
}
});
$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs。
Vue.component("child-component", {
template: `子组件1`,
});
var app = new Vue({
el: "#app",
data: {
showChild: true
}
});
Vue.component("child-component", {
template: `子组件`,
data() {
return {
showChild: true
}
}
});
var app = new Vue({
el: "#app",
});
Vue.component("child-component", {
template: `
`,
});
var app = new Vue({
el: "#app",
});
子组件
具名Slot
Vue.component("child-component", {
template: `
标题
底部信息
`,
});
var app = new Vue({
el: "#app",
});
内的
Vue.component("my-component", {
template: `#my-component`,
});
var app = new Vue({
el: "#app",
});
手动挂载实例
Vue.component("child-component", {
template: `
`,
});
var app = new Vue({
el: "#app",
});
Vue.component("my-list", {
props: {
books: {
type: Array,
default: function () {
return [];
}
}
},
template: `
`,
});
Vue.component("child-component", {
template: `
标题
底部信息
`,
mounted: function () {
var header = this.$slots.header;
var main = this.$slots.default;
var footer = this.$slots.footer;
console.log(footer);
console.log(footer[0].elm.innerHTML);
}
});
var app = new Vue({
el: "#app",
});
Vue.component("child-component", {
name: "child-component",
props: {
count: {
type: Number,
default: 1
}
},
template: `
`,
});
Vue.component("child-component", {
data() {
return {
msg: "在子组件中声明的数据"
}
}
});
var app = new Vue({
el: "#app",
data: {
message: "在父组件中声明的数据"
}
});
在父组件中定义子组件的模板
var app = new Vue({
el: "#app",
data: {
currentView: "comA"
},
components: {
comA: {
template: `组件A`
},
comB: {
template: `组件B`
},
comC: {
template: `组件C`
},
},
methods: {
handleChangeView: function (component) {
this.currentView = "com" + component
}
}
});
异步组件
var Home = {
template: `
Vue.component("child-component", function (resolve, reject) {
window.setTimeout(function () {
resolve({
template: `我是异步渲染的！`
})
}, 1000)
});
var app = new Vue({
el: "#app",
});
X-Templates
var app = new Vue({
el: "#app",
data: {
showDiv: false
},
methods: {
getText: function () {
this.showDiv = true;
this.$nextTick(function () {
var text = document.getElementById("div");
console.log(text.innerHTML);
})
}
}
});这是一段文本
var MyComponent = Vue.extend({
template: `
Hello {{name}}`,
data() {
return {
name: "Andy"
}
}
});
new MyComponent().$mount("#app");new MyComponent().$mount("#app");
new MyComponent({
el: "#app"
})
相关文章
Vue 组件通信详解
实例化vue发生了什么?(详解vue生命周期)
Vue.js基础详解
详解 mpvue 小程序框架 及和原生的差异
Vue.js-组件详解
发表评论
0条评论
dadong
男|高级讲师
TA的文章
阅读更多
工作3年，感觉自己一直在从事无效的软件测试工作
如何知道主机名-怎样查找计算机的主机名？
jQuery入门教程-文档操作方法
怎么修改input、textarea元素中的placeholder属性样式
css学习笔记（一）
CSS > 选择器优先级与效率优化
Vue-组件详解
node---(1)创建一个node服务器
最新活动
阅读需要支付1元查看
