1.Vue组件的核心概念--属性
组件其实是被认为是一个个独立的 UI 模块，一个系统就是由这些模块合起来。
不同组件其实就是 options 的不同。
关于 props 其实是不推荐直接 props 后面啪的是一堆东西，而是对象的形式一个个详细的给，方便后面的维护。
//props: [ " name', 'type', "list', 'isVisible'], props:{ name: String, type:{ validator: function(value){ //这个值必须匹配下列字符串中的一个 return [""success",""warning"."danger""].includes(value); }, list:{ type: Array, //对象或数组默认值必须从一个工厂函散获取 default:()=>[] ), isVisible: {type: Boolean,default: false}, onChange: { type: Function,default:()=>{} } },
不推荐用 onChange 这个名字，可能会与之后的函数冲突。至于我们父组件里多传了一个title 等原生属性而子组件却没有对齐进行处理则会默认自动挂载到根元素上！可以在子组件通过 inheritAttrs 置为 false 取消挂载。注意父组件传递过来的属性无法直接修改，因为是单向数据流。
答案：
在组件initProps方法的时候，会对props进行delineReactive操作，传入的第四个参数是自定义的sel的数，该函数会在触发props的set方法时执行，当props修改了，就会运行这里传入的第四个参数，然后进行判断，如果不Mroot根组件，并且不是更新子组件，那么说明更新的是props，所以会警告。
if (process.env.NODE_EN !== ' production '){ var hyphenatedKey = hyphenate(key); if (isReservedAttribute(hyphenatedKey) || config.isReservedAttr(hyphenatedKey)){ warn( ("\""+ hyphenatedKey +"\" is a reserved attribute and cannot be used as component prop."), vm ); } defineReactives$$1( props,key,value,function (){ if(!isRoot && !isUpdatingchildcomponent) { warn( "Avoid mutating a prop directly since the value will be " +"overwritten whenever the parent component re-renders." + "Instead, use a data or computed property based on the prop's " +"value.Prop being mutated:"" + key +"\"", vm );));
2.Vue组件的核心概念--事件
<div> name: {{ nane || "--" }} <br/> <input :value="name"" @change="handleChange"/> <br/> <br/> <div @click="handleDivclick"> <button @click="handleClick">重置成功</button> <button aclick.stop="handleClick">重置失败</button> </div> </div> </template> <script> export default { name:"EventDeno", props:{ name: String, methods:{ handleChange(e) { this.$emit("change".e.target.value); }, handleDivClick() { this.$emit("change",""); }, handleclick(e){ //都会失败 //e.stopPropagation() : </script>
这个其实就是输入的话触发 handleChange ，改变 name 值，点击按钮都会把 name 置为空，如果 .stop （即重置失败）会阻止冒泡以至于无法冒到 div 的点击事件（清空 name ）也就 无法清空，如果在两个按钮的事件里用 stopPropagation 则点哪个按钮都无法置空.
3.Vue组件的核心概念--插槽
现在其实都不区分插槽了，推荐使用下面的方式即每一段下面那种（↑）。
<a-tab-pane key="slot" tab="插槽"> <h2>2.6新语法</h2> <SlotDemo> <p>default slot</p> <template v-slot:title> <p>title slot1</p> <p>title siot2</p> </template> <template v-slot:item="props"> <p>item slot-scope {{ props }}</p> </template> </SlotDemo> <br/> <h2>老语法</h2> <SlotDemo> <p>default slot</p> <p slot="title">title slot1</p> <p slot="title">title slot2</p> <p slot="item" slot-scope="props">item slot-scope {{ props }}</p> </SlotDeno>
<template> <div> <slot/> <slot namea"title" /> <slot hame="item" v-bind="{ value: 'vue' } /> </div> </template> <script> export default { name: "SLotDemo" }; </script>
作用域插槽是通过 v-bind 的方式把属性传递过去.
所谓大属性就是这三类其实都可以通过属性去实现。
