• 【Vue五分钟】 五分钟了解Vue组件的核心概念

    📑博客主页：@丘比特惩罚陆

    💖欢迎关注：点赞收藏⭐留言✒
    💬系列专栏：web前端、嵌入式、笔记专栏
    🎮 加入社区： 灌水乐园
    🥇人生格言：选对方向，每走一步都是进步！
    ✒️欢迎大佬指正，一起学习！一起加油！

    👏 希望大家能小手一动，帮忙点个赞！

    😁资源邮箱：2237814512@qq.com；微信：lss0901lili1130

    目录

    1.Vue组件的核心概念--属性

    2.Vue组件的核心概念--事件

    3.Vue组件的核心概念--插槽

    1.Vue组件的核心概念--属性

    组件其实是被认为是一个个独立的 UI 模块，一个系统就是由这些模块合起来。

    不同组件其实就是 options 的不同。

     关于 props 其实是不推荐直接 props 后面啪的是一堆东西，而是对象的形式一个个详细的给，方便后面的维护。

    1. //props: [ " name', 'type', "list', 'isVisible'],
    2. props:{
    3. name: String,
    4. type:{
    5. validator: function(value){
    6. //这个值必须匹配下列字符串中的一个
    7. return [""success",""warning"."danger""].includes(value);
    8. },
    9. list:{
    10. type: Array,
    11. //对象或数组默认值必须从一个工厂函散获取
    12. default:()=>[]
    13. ),
    14. isVisible: {type: Boolean,default: false},
    15. onChange: {
    16. type: Function,default:()=>{}
    17. }
    18. },
    不推荐用 onChange 这个名字，可能会与之后的函数冲突。至于我们父组件里多传了一个title 等原生属性而子组件却没有对齐进行处理则会默认自动挂载到根元素上！可以在子组件通过 inheritAttrs 置为 false 取消挂载。注意父组件传递过来的属性无法直接修改，因为是单向数据流。

     

     答案：

     在组件initProps方法的时候，会对props进行delineReactive操作，传入的第四个参数是自定义的sel的数，该函数会在触发props的set方法时执行，当props修改了，就会运行这里传入的第四个参数，然后进行判断，如果不Mroot根组件，并且不是更新子组件，那么说明更新的是props，所以会警告。

    1. if (process.env.NODE_EN !== ' production '){
    2. var hyphenatedKey = hyphenate(key);
    3. if (isReservedAttribute(hyphenatedKey) ||
    4. config.isReservedAttr(hyphenatedKey)){
    5. warn(
    6. ("\""+ hyphenatedKey +"\" is a reserved attribute and cannot be used as component prop."),
    7. vm
    8. );
    9. }
    10. defineReactives$$1( props,key,value,function (){
    11. if(!isRoot && !isUpdatingchildcomponent) {
    12. warn(
    13. "Avoid mutating a prop directly since the value will be " +"overwritten whenever the parent component re-renders." +
    14. "Instead, use a data or computed property based on the prop's " +"value.Prop being mutated:"" + key +"\"",
    15. vm
    16. );));

    2.Vue组件的核心概念--事件

     

    2. name: {{ nane || "--" }}

    4. <input :value="name"" @change="handleChange"/>
    5. <br/>
    6. <br/>
    7. <div @click="handleDivclick">
    8. <button @click="handleClick">重置成功button>   
    9. <button aclick.stop="handleClick">重置失败button>
    10. div>
  • <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组件的核心概念--插槽

     现在其实都不区分插槽了，推荐使用下面的方式即每一段下面那种（↑）。

    1. "slot" tab="插槽">
    2. <h2>2.6新语法h2>
    3. <SlotDemo>
    4. <p>default slotp>
    5. <template v-slot:title>
    6. <p>title slot1p>
    7. <p>title siot2p>
    8. template>
    9. <template v-slot:item="props">
    10. <p>item slot-scope {{ props }}p>
    11. template>
    12. SlotDemo>
    13. <br/>
    14. <h2>老语法h2>
    15. <SlotDemo>
    16.  <p>default slotp>
    17. <p slot="title">title slot1p>
    18. <p slot="title">title slot2p>
    19. <p slot="item" slot-scope="props">item slot-scope {{ props }}p>
    20. SlotDeno>
    2.  
    3.