【day 08】vue父子组件通信

props实现父子组件通信

Song.vue Singer.vue ==>父组件
SectionList.vue ==>子组件

SectionList 需要 标题+列表数据

爸爸传什么数据 我就渲染什么数据(需求)
Song.vue


<template>
    <div id="song">
        <SectionList  v-bind:sectionObj="sectionObj"
       
        ></SectionList>
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Song",
    components:{
        SectionList
    },
    data(){
        return{
             sectionObj:{
        title:"歌曲列表",
        arr:[
            {id:1,name:"稻香"},
            {id:2,name:"丑八怪"},
            {id:3,name:"动物世界"},
            {id:4,name:"梨花香"}
        ]
    }

        }
    }
   
};
</script>

Singer.vue

<template>
    <div id="singer">
        <SectionList  v-bind:sectionObj="sectionObj"></SectionList>
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Singer",
   components:{
        SectionList
    },
    data(){
          return{
            msg:"我是song1给的小纸条"
    sectionObj:{
        title:"歌手列表",
        arr:[
            {id:1,name:"周杰伦"},
            {id:2,name:"薛之谦"},
            {id:3,name:"陈奕迅"},
            {id:4,name:"孙燕姿"}
        ]
    }

        }
    } 
    };
 

</script>

SelectionList.vue

<template>
    <div>
           <div>{{ sectionObj.title }}</div>
    <ul>
        <li v-for="item in sectionObj.arr" :key="item.id">{{ item.name }}</li>
    </ul> 
    </div>

</template>
<script>

export default{
    name:"SectionList",
    // props 写自定义组件标签内的标签属性名接收了  就可以在此组件内   使用此标签属性内的对象
    props:["sectionObj"]
}
</script>

流程复盘

1.要在父组件内 自定义属性:自定义属性名 = ‘我们想要传的对象’ 子
2. 子组件内要接收 props:[‘自定义属性名’]
3. 组件内使用数据时:直接使用 自定义属性名即可

注意

  1. props 形式 单向的 只适用于 父子组件之间
  2. 数据流向 只能 父 流向 子
  3. props 数据 只读 (不允许你去修改)
  4. 子组件内 修改了props 不会引发父级的变化(不让数据的流向难以理解)
  5. 父级内修改了 props 传的对象的数据 引发子组件的变化

如果我们希望在子组件内部 对传来的props内的属性 进行加工处理(可以用上computed)


<div>{{ handleObj.title }}</div>
 handleTitle(){
          return   this.sectionObj.title+"!!!!"
        }

        错误示范:
        created(){
            // 这么做  违背了props内属性只读的原则
            this.sectionObj.title +="!!!!!"
        },

props 接收写法

数组写法:
  props:["sectionObj"],props:['标签属性名']

  接收多个属性   可以接收   动态绑定的   也可以接收普通属性
    <SectionList  v-bind:sectionObj="sectionObj"
        title="我是歌曲"
        :dataStr="msg"
        ></SectionList>

         props:["sectionObj","title","dataStr"],

<template>
    <div id="song">
        <SectionList  v-bind:sectionObj="sectionObj"
        title="我是歌曲"
        :dataStr="msg"
        ></SectionList>
        <!-- <button @click="fn()">修改sectionObj的值</button> -->
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Song",
    components:{
        SectionList
    },
    data(){
        
        return{
            msg:"我是song给的小纸条",
             sectionObj:{
        title:"歌曲列表",
        arr:[
            {id:1,name:"稻香"},
            {id:2,name:"丑八怪"},
            {id:3,name:"动物世界"},
            {id:4,name:"梨花香"}
        ]
    }

    }

    },
      methods:{
        fn(){
        this.sectionObj.title+="!!!!"
        }
    }
   
};
</script>
<template>
    <div id="singer">
        <SectionList  v-bind:sectionObj="sectionObj"
        title="我是歌曲"
        :dataStr="msg"
        ></SectionList>
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Singer",
   components:{
        SectionList
    },
    data(){
          return{
            msg:"我是Singer给的小纸条",
      sectionObj:{
        title:"歌手列表",
        arr:[
            {id:1,name:"周杰伦"},
            {id:2,name:"薛之谦"},
            {id:3,name:"陈奕迅"},
            {id:4,name:"孙燕姿"}
        ]
    }

        }
    } 
    };
 

</script>
<template>
    <div>
           <div>{{ sectionObj.title }}</div>
           <h1>{{ title }}</h1>
            <!-- <div>{{ handleObj.title }}</div>
           <div>{{ handleTitle }}</div> -->
    <ul>
        <li v-for="item in sectionObj.arr" :key="item.id">{{ item.name }}</li>
    </ul>
    <p>{{ dataStr }}</p> 
    </div>

</template>
<script>

export default{
    name:"SectionList",
    // props 写自定义组件标签内的标签属性名接收了  就可以在此组件内   使用此标签属性内的对象
    props:["sectionObj","title","dataStr"],
    computed:{
        handleObj(){
            let title = this.sectionObj.title+"!!!!";
            return {
                title,
                arr: this.sectionObj.arr 

        }
      
    },
  handleTitle(){
          return   this.sectionObj.title+"!!!!"
        }
    }


};
</script>
props:{
    sectionObj:Object ,接收 sectionObj标签属性内的数据   但是只接收   对象类型
},

sectionObj:[String,Array],允许多个类型


sectionObj:{
    type:Object,//限制数据类型为对象
    required:true,//这个数据必须传  不传会给警告
}


sectionObj:{
    type:Object,
    default:{},//没有传入数据时  使用默认值选项
}

sectionObj:{
    type:Object,
    default:function(){
        // 适用于   值没法写死  可能要在这请求一下   或者计算一下   再return 出去
        // return的值  作为default的值
        return {}  //return 出一个空对象
    }
}

自定义验证函数
sectionObj:{
    validator(value){
        // value 就是 sectionObj传过来的值
        // 函数内部   return true 就是验证通过  return false 验证不通过
        // 可以在这里  定义各种各样的规则
        return ["我","你","他"].includes(value);
    }
}


props 没有接收的标签属性

会 识别到 子组件内 跟节点的 html标签上 作为标签属性
浏览器内 这个组件是子组件

没有被props 接收了的标签属性 会出现在根节点 被props 接收了的标签属性 不会出现在根节点
没有被props接收的标签属性   出现在vc上的$attrs上接收
 created(){
        console.log(this.$attrs);
    },

    如果不希望  继承   自定义标签内的标签属性
    // 修改默认继承属性的布尔值  false不继承
    inheritAttrs:false,(根节点上,就不会出现那些未被props接收的标签属性)

<template>
    <div>
           <div>{{ sectionObj.title }}</div>
           <h1>{{ title }}</h1>
            <!-- <div>{{ handleObj.title }}</div>
           <div>{{ handleTitle }}</div> -->
           <!-- v-bind可以绑定一个对象 v-bind="$attrs" -->
    <ul > 
        <li v-for="item in sectionObj.arr" :key="item.id">{{ item.name }}</li>
    </ul>
    <p>{{ dataStr }}</p> 
    </div>

</template>
<script>

export default{
    name:"SectionList",
    // props 写自定义组件标签内的标签属性名接收了  就可以在此组件内   使用此标签属性内的对象
    props:["sectionObj","dataStr"],
    computed:{
        handleObj(){
            let title = this.sectionObj.title+"!!!!";
            return {
                title,
                arr: this.sectionObj.arr 

        }
      
    },
  handleTitle(){
          return   this.sectionObj.title+"!!!!"
        }
    },
    created(){
        console.log(this.$attrs);
    },
    // 修改默认继承属性的布尔值  false不继承
    inheritAttrs:false,


};
</script>

子传父 通过自定义的事件

song.vue

<template>
    <div id="song">
    <h1>{{ msg }}</h1>
        <SectionList  v-bind:sectionObj="sectionObj" @changeMsg="fn"></SectionList>
        <!-- <button @click="fn()">修改sectionObj的值</button> -->
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Song",
    components:{
        SectionList
    },
    data(){
        
        return{
            msg:"我是song的小纸条",
             sectionObj:{
        title:"歌曲列表",
        arr:[
            {id:1,name:"稻香"},
            {id:2,name:"丑八怪"},
            {id:3,name:"动物世界"},
            {id:4,name:"梨花香"}
        ]
    }

    }

    },
      methods:{
        fn(){
    //    父组件内
    // 修改msg的操作
    this.msg +="~~~~~~~";
        }
    }
   
};
</script>

Sectionlist.vue

<template>
    <div>
           <div>{{ sectionObj.title }}</div>
    <ul > 
        <li v-for="item in sectionObj.arr" :key="item.id">{{ item.name }}</li>
    </ul>
<button @click="childFn">点我触发自定义事件</button>
    </div>

</template>
<script>

export default{
    name:"SectionList",
    // props 写自定义组件标签内的标签属性名接收了  就可以在此组件内   使用此标签属性内的对象
    props:["sectionObj"],
   methods:{
    childFn(){
        // 子组件内   在这里  父组件内   changeMsg  自定义事件
        this.$emit("changeMsg ")
    }
   }


};
</script>

步骤复盘

1. 在父组件内  给子组件标签   添加自定义事件   changeMsg  事件回调函数   是 fn
 <SectionList  v-bind:sectionObj="sectionObj" @changeMsg="fn"></SectionList>
     fn(){
    //    父组件内
    // 修改msg的操作
    this.msg +="~~~~~~~";
        }
    
2. 子组件内  在某个时机内  触发  父组件内  changeMsg 自定义事件
当前时机是  点击子组件内按钮时  触发  父组件内  changeMsg自定义事件
<button @click="childFn">点我触发自定义事件</button>
  childFn(){
        // 子组件内   在这里  父组件内   changeMsg  自定义事件
        this.$emit("changeMsg ")
    }

Song.vue

<template>
    <div id="song">
    <h1>{{ msg }}</h1>
        <SectionList  v-bind:sectionObj="sectionObj" @changeMsg="fn"></SectionList>
        <!-- <button @click="fn()">修改sectionObj的值</button> -->
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Song",
    components:{
        SectionList
    },
    data(){
        
        return{
            msg:"我是song的小纸条",
             sectionObj:{
        title:"歌曲列表",
        arr:[
            {id:1,name:"稻香"},
            {id:2,name:"丑八怪"},
            {id:3,name:"动物世界"},
            {id:4,name:"梨花香"}
        ]
    }

    }

    },
      methods:{
        fn(){
    //    父组件内
    // 修改msg的操作
    this.msg +="~~~~~~~";
        }
    }
   
};
</script>

SectionList.vue

<template>
    <div>
           <div>{{ sectionObj.title }}</div>
    <ul > 
        <li v-for="item in sectionObj.arr" :key="item.id">{{ item.name }}</li>
    </ul>
<button @click="childFn">点我触发自定义事件</button>
    </div>

</template>
<script>

export default{
    name:"SectionList",
    // props 写自定义组件标签内的标签属性名接收了  就可以在此组件内   使用此标签属性内的对象
    props:["sectionObj"],
   methods:{
    childFn(){
        // 子组件内   在这里  父组件内   changeMsg  自定义事件
        this.$emit("changeMsg");
    }
   }


};
</script>

传参写法


子组件内
childFn(){
    // 子组件内  在这里 触发 父组件内  changeMsg  自定义事件
    this.$emit("changeMsg","我是儿子");
}

父组件为
fn(fromChildValue){
    // fromChildValue  接收  “我是儿子” 这个参数
    // 父组件内
    // 获取msg的操作;
},


和之前的不同  $event
之前 $event是传入的是《事件对象》
 <SectionList  v-bind:sectionObj="sectionObj"  @changeMsg='msg = $event'></SectionList>

  this.$emit("changeMsg","我是儿子");传来的实参 “我是儿子”

song.vue

<template>
    <div id="song">
    <h1>{{ msg }}</h1>
    
    <SectionList  v-bind:sectionObj="sectionObj"  @changeMsg='msg = $event'></SectionList>
        <!-- <button @click="fn()">修改sectionObj的值</button> -->
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Song",
    components:{
        SectionList
    },
    data(){
        
        return{
            msg:"我是song的小纸条",
             sectionObj:{
        title:"歌曲列表",
        arr:[
            {id:1,name:"稻香"},
            {id:2,name:"丑八怪"},
            {id:3,name:"动物世界"},
            {id:4,name:"梨花香"}
        ]
    }

    }

    },
      methods:{
        fn(fromChildValue){
    //    父组件内
    // 修改msg的操作
    this.msg +=fromChildValue;
        }
    }
   
};
</script>
<template>
    <div>
           <div>{{ sectionObj.title }}</div>
    <ul > 
        <li v-for="item in sectionObj.arr" :key="item.id">{{ item.name }}</li>
    </ul>
<button @click="childFn">点我触发自定义事件</button>
    </div>

</template>
<script>

export default{
    name:"SectionList",
    // props 写自定义组件标签内的标签属性名接收了  就可以在此组件内   使用此标签属性内的对象
    props:["sectionObj"],
   methods:{
    childFn(){
        // 子组件内   在这里  父组件内   changeMsg  自定义事件
        this.$emit("changeMsg","我是儿子");
    }
   }


};
</script>

自定义事件的其他绑定方式

第一种 @自定义事件名='事件函数'
@changeMsg = 'msg = $event'

触发时  this.$emit('自定义事件名')

第二种
// 渲染之后
  mounted(){
    // 给他绑定  自定义事件
    // this.$refs.section.$on("changeMsg",() =>{
    //     this.msg +="~~~~~";
    // })

// $once 一次性绑定
    this.$refs.section.$once("changeMsg",() =>{
        this.msg +="~~~~~";
    });
 
  },
//   事件的解绑
     destroyed() {
    this.$refs.section.$off("changeMsg");
   },
};

只适合儿子改变父亲 (兄弟之间不能成功 爷孙之间也不能成功)

实现点击子组件li 父组件 法起请求 路由跳转的功能

子组件内
    <ul > 
        <li v-for="item in sectionObj.arr" :key="item.id"
        @click = "childFn(item)"
        
        >{{ item.name }}
        
        </li>
    </ul>

    methods:{
        childFn(item){
            // 子组件内  在这里 触发  父组件内  changeMsg  自定义事件
            this.$emit('changeMsg',item);
        }
    }

    父组件内
    <SectionList  :sectionObj="sectionObj" @changeMsg="fn"></SectionList>
     methods:{
        fn(item){
            // 通过id发起请求  请求数据
            // 通过 路由跳转  另外的组件
        }
     }
全局事件总线(总栈)

在vm上挂载自定义事件 vm上触发自定义事件

  1. 第一步 把 vm对象 挂载到 Vue原型上

new Vue({
  render: h => h(App),
  beforeCreate(){
    // 把vm对象  挂载到Vue的原型对象上去   为了方便   各个组件的vc对象能获取vm
    Vue.prototype.$bus = this
  }
}).$mount('#app')
  1. 第二步 vm注册上 自定义事件 (需要被改变的组件 需要被接收值的组件)
  created(){
    // 注册   事件
    this.$bus.$on("changSongMsg",(value) =>{
        this.msg += value;
    });
  }
  1. 第三步 触发 Vm上的自定义事件 (需要传值给别人的组件)
 <button @click="changeApp">点击按钮   给app传值</button>
   methods:{
    changeApp(){
          //  vm.$emit("changeMsg") 报错
    // this 这里的this指向的是vc
    // vc  能使用到Vue.prototype  原型上的属性和方法
    console.log(this.$bus);
    console.log(this);
    this.$bus.$emit("changeMsg","我是孙子传给你的值")
    }


   }

这种方案 适合于 任意组件之间的传值
相当于孙子给爷爷传值互相通信
App.vue

<template>
  <div id="app">
   <Song id="song"></Song>
   <Singer id="singer"></Singer>
   <p>{{ msg }}</p>
  </div>
</template>

<script>
import Song from "./components/Song";
import Singer from "./components/Singer";
export default{
  name:"App",
  components:{
    Song,
    // Singer,
  },
  data(){
    return{
         msg:"我是App的数据"
    }
 
  },
  created(){
    // 绑定自定义事件    事件回调
    this.$bus.$on("changeMsg",(value)=>{
      // 我们修改l
      this.msg += value
    })
  }

}

</script>

<style>
#song{
  float:left; 
  width:200px;
  background-color: yellow;

}
#singer{
  float:left;
  width: 200px;
  background-color: skyblue;
}
</style>

Song.vue

<template>
    <div id="song">
    <h1>{{ msg }}</h1>
    
    <!-- <SectionList  v-bind:sectionObj="sectionObj"  @changeMsg='msg = $event'></SectionList> -->
    <SectionList  v-bind:sectionObj="sectionObj" ref="section"></SectionList> 
    <!-- <button @click="fn()">修改sectionObj的值</button> -->
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Song",
    components:{
        SectionList
    },
    data(){
        
        return{
            msg:"我是song的小纸条",
        sectionObj:{
        title:"歌曲列表",
        arr:[
            {id:1,name:"稻香"},
            {id:2,name:"丑八怪"},
            {id:3,name:"动物世界"},
            {id:4,name:"梨花香"}
        ]
    }

    }

    },
// 渲染之后
  mounted(){
  
  },
   
};
</script>

SectionList.vue

<template>
    <div>
           <div>{{ sectionObj.title }}</div>
    <ul > 
        <li v-for="item in sectionObj.arr" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="changeApp">点击按钮   给app传值</button>
    </div>

</template>
<script>

export default{
    name:"SectionList",
    // props 写自定义组件标签内的标签属性名接收了  就可以在此组件内   使用此标签属性内的对象
    props:["sectionObj"],
   methods:{
    changeApp(){
          //  vm.$emit("changeMsg") 报错
    // this 这里的this指向的是vc
    // vc  能使用到Vue.prototype  原型上的属性和方法
    console.log(this.$bus);
    console.log(this);
    this.$bus.$emit("changeMsg","我是孙子传给你的值")
    }


   }


};
</script>
想给兄弟song传值

Song.vue

<template>
    <div id="song">
    <h1>{{ msg }}</h1>
    
    <!-- <SectionList  v-bind:sectionObj="sectionObj"  @changeMsg='msg = $event'></SectionList> -->
    <SectionList  v-bind:sectionObj="sectionObj" ref="section"></SectionList> 
    <!-- <button @click="fn()">修改sectionObj的值</button> -->
    </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Song",
    components:{
        SectionList
    },
    data(){
        
        return{
            msg:"我是song的小纸条",
        sectionObj:{
        title:"歌曲列表",
        arr:[
            {id:1,name:"稻香"},
            {id:2,name:"丑八怪"},
            {id:3,name:"动物世界"},
            {id:4,name:"梨花香"}
        ]
    }

    }

    },
// 渲染之后
  mounted(){
  
  },
  created(){
    // 注册   事件
    this.$bus.$on("changSongMsg",(value) =>{
        this.msg += value;
    });
  }
   
};
</script>

Singer.vue

<template>
    <div id="singer">
        <h1>{{ msg }}</h1>
         <button @click="changeBrother">给兄弟song传值</button>
        <SectionList  v-bind:sectionObj="sectionObj"></SectionList>
      
   </div>
</template>
<script>
import SectionList from '@/components/SectionList';
export default{
    name:"Singer",
   components:{
        SectionList
    },
    data(){
          return{
            msg:"我是Singer的小纸条",
      sectionObj:{
        title:"歌手列表",
        arr:[
            {id:1,name:"周杰伦"},
            {id:2,name:"薛之谦"},
            {id:3,name:"陈奕迅"},
            {id:4,name:"孙燕姿"}
        ]
    }

        }
    },
    methods: {
        changeBrother(){
            this.$bus.$emit("changSongMsg","我是你的兄弟singer")
        }
    }

    };
 

</script>

共用型的知识

mixin 混入

把一些公共的 配置项 单独抽离到一个js文件中 需要使用这些公共配置项的组件 只需要引入mixin就可以了 ===> 配置的复用

// 导出对象
export const mixin = {
    // 放  公共的配置项
    data(){
        return {
            msg:"公共的数据"
        }
    },
    methods:{
        alertName(){
            alert(this.name)
        }
    },
    created(){
        console.log("我是大可爱!!!")
    }
}

song.vue

<template>
    <div id="song">
        <p>{{ msg }}</p>
   <h2>公司名称:{{ name }}</h2>
   <h2>公司地址:{{ address }}</h2>
   <button @click="alertName">点我查看名字</button>
    </div>
</template>
<script>
// 导入 mixin
import {mixin} from "@/mixin.js";
export default{
    name:"Song",
  
    data(){
        return{
            name:"社会有限责任公司",
            address:"三里吨",
        
    }

    },
    // methods:{
    //     alterName(){
    //         alert(this.name)
    //     }
    // }
    mixins:[mixin],

    }

 

</script>

singer.vue

<template>
    <div id="singer">
        <p>{{ msg }}</p>
      <h2>美女名称:{{ name }}</h2>
      <h2>美女年龄:{{ age }}</h2>
      <button @click="alertName">点我查看名字</button>
   </div>
</template>
<script>
import {mixin} from "@/mixin.js";
export default{
    name:"Singer",

    data(){
          return{
            name:"迪丽热巴",
            age: "18"
          
    }
    },

    // methods: {
    //    alertName(){
    //     alert(this.name)
    //    }
    // }
    mixins:[mixin],
}

</script>

全局混入

Vue.mixin(mixin) //几乎不用

增强Vue功能 plugin (插件的意思)

  1. 第一步 创建 plugin.js 或者 plugin/index.js 或者 plugin/plugin.js

// 定义 创建内容  目的: 用于增强 Vue的功能 (全局功能)
 export default{
    // 接收的第一个形参   是Vue 构造函数
    install(Vue){
        // 添加全局指令
        // Vue.directive(...)

        // // 添加全局组件
        // Vue.component(...)

        // // 添加全局混入
        // Vue.mixin(...)

        // 添加原型方法
        Vue.prototype.$busApi = function(){
            console.log("plugin万岁")
        }
    }
 }
  1. 第二步:在main.js 中导入对象 并使用
// 步写index.js  也可以找到  index.js (默认入口文件)
import plugins from './plugins'

Vue.use(plugins) //写在  挂载之前
触发  install函数运行   全局方法   指令就可以挂载成功了

install 函数 允许传参进来

   install(Vue,option){...}  option 接收到1
   Vue.use(plugins,1,2)

main.js


/*
该文件是整个项目的入口文件
*/
// 引入vue
import Vue from 'vue'
// 引入App组件,它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false

// 步写index.js  也可以找到  index.js (默认入口文件)
import plugins from './plugins'

Vue.use(plugins)

console.log(plugins)
// 创建Vue实例对象----vm
new Vue({
  render: h => h(App),
  beforeCreate(){
    // 把vm对象  挂载到Vue的原型对象上去   为了方便   各个组件的vc对象能获取vm
    Vue.prototype.$bus = this
  }
}).$mount('#app')

Singer.vue

<template>
    <div id="singer">
        <p>{{ msg }}</p>
      <h2>美女名称:{{ name }}</h2>
      <h2>美女年龄:{{ age }}</h2>
      <button @click="alertName">点我查看名字</button>
      <button @click="fn">调用原型上的方法</button>
   </div>
</template>
<script>
import {mixin} from "@/mixin.js";
export default{
    name:"Singer",

    data(){
          return{
            name:"迪丽热巴",
            age: "18"
          
    }
    },

    // methods: {
    //    alertName(){
    //     alert(this.name)
    //    }
    // }
    mixins:[mixin],
    methods:{
       fn(){
        this.$busApi();
       }
    }

}
</script>

小tips

项目中 一般把通用型的方法 写在utils文件夹内
如 密码验证函数 数组去重 日期格式化函数 …

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/24124.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【P32】JMeter While 控制器(While Controller)

文章目录 一、While 控制器&#xff08;While Controller&#xff09;参数说明二、测试计划设计2.1、变量2.2、函数2.2.1、groovy脚本2.2.2、jex13脚本2.2.3、js脚本 一、While 控制器&#xff08;While Controller&#xff09;参数说明 可以对部分逻辑按变量条件进行循环迭代…

CentOS7编译安装Python3.10(含OpenSSL1.1.1安装),创建虚拟环境,运行Django项目(含sqlite版本报错)

文章目录 1、CentOS安装OpenSSL1.1.1&#xff08;前置环境&#xff09;2、CentOS安装 Python 3.103、创建虚拟环境4、运行Django项目 1、CentOS安装OpenSSL1.1.1&#xff08;前置环境&#xff09; 编译安装Python3.10时需要openssl1.1.1 查看当前版本 & 删除openssl1.0 …

代码随想录算法训练营第三十九天 | 力扣 62.不同路径, 63. 不同路径 II

62.不同路径 题目 62. 不同路径 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多…

C++数据结构:二叉树之一(数组存储)

文章目录 前言一、二叉树的基本定义二、二叉树的基本性质三、二叉树的存储&#xff08;数组&#xff09;总结原创文章&#xff0c;未经许可&#xff0c;禁止转载 前言 树是一种非线性数据结构&#xff0c;它由若干个节点和边组成。每个节点都有一个值&#xff0c;而边则表示节…

day17 - 用形状包围图像

在进行图像轮廓提取时&#xff0c;有的情况下不需要我们提取出精确的轮廓&#xff0c;只要提取出一个接近于轮廓的近似多边形&#xff0c;就可以满足后续的操作。 本期我们来学习如何通过设置参数来找出图像的近似多边形。 完成本期内容&#xff0c;你可以&#xff1a; 了解…

算法基础学习笔记——⑨C++STL使用技巧

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;算法基础学习 目录 ✨CSTL简介 ✨CSTL使用技巧 前言&#xff1a;算法学习笔记记录日常分享&#xff0c;需要的看哈O(∩_∩)O&#xff0c;感谢大家的支持&#xff01; ✨CSTL简介 vector变长数组&#xff0c;倍增的思想//系统为…

STM32单片机(三)第一节:GPIO输出

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

驱动开发:内核读写内存浮点数

如前所述&#xff0c;在前几章内容中笔者简单介绍了内存读写的基本实现方式&#xff0c;这其中包括了CR3切换读写&#xff0c;MDL映射读写&#xff0c;内存拷贝读写&#xff0c;本章将在如前所述的读写函数进一步封装&#xff0c;并以此来实现驱动读写内存浮点数的目的。内存浮…

MyBatis操作数据库表和动态SQL的使用

目录 1.MyBatis开发环境的搭建和测试 2.MyBatis基本操作 2.0 准备工作 2.1 新增操作 2.2 删除、修改、查询操作 2.3 #{param} 和 ${param}的使用和区别 2.4 实体对象属性和数据库字段名称不同时如何映射&#xff1f; 3. MyBatis多表查询 3.0 准备工作 3.1 一对一的表…

ELK企业级日志分析系统

ELK概述 为什么要使用 ELK 日志主要包括系统日志、应用程序日志和安全日志。系统运维和开发人员可以通过日志了解服务器软硬件信息、检查配置过程中的错误及错误发生的原因。经常分析日志可以了解服务器的负荷&#xff0c;性能安全性&#xff0c;从而及时采取措施纠正错误。 往…

切比雪夫不等式,大数定律及极限定理。

一.切比雪夫不等式 1.定理 若随机变量X的期望EX和方差DX存在,则对任意ε > 0,有   P{ |X - EX| > ε } < DX/ε2 或 P{ |X - EX| < ε } > 1 - DX/ε2 2.解析定理 ①该定理对 X 服从什么分布不做要求&#xff0c;仅EX DX存在即可。 ②“| |” 由于X某次…

软件测试炸了,作为从业者,你做好准备了吗?

软件测试行业已经发生很大变化&#xff0c;你跟上变化了吗&#xff1f; 岗位少不可怕&#xff0c;要求越来越高也不可怕&#xff0c;可怕的是&#xff0c;软件测试行业已经发生巨变&#xff0c;而你却原地踏步&#xff01;目前一线大厂更多倾向于招收测试开发&#xff0c;或者…

自学网络安全(黑客),一般人我劝你还是算了吧

一、自学网络安全学习的误区和陷阱 1.不要试图先成为一名程序员&#xff08;以编程为基础的学习&#xff09;再开始学习 我在之前的回答中&#xff0c;我都一再强调不要以编程为基础再开始学习网络安全&#xff0c;一般来说&#xff0c;学习编程不但学习周期长&#xff0c;而且…

torch.distributed.launch多卡多机

torch.distributed.launch命令介绍 我们在训练分布式时候&#xff0c;会使用到 torch.distributed.launch 可以通过命令&#xff0c;来打印该模块提供的可选参数 python -m torch.distributed.launch --help usage: launch.py [-h] [--nnodes NNODES] [--node_rank NODE_RANK]…

诚迈科技携智达诚远出席高通汽车技术与合作峰会

5月25日至26日&#xff0c;诚迈科技及旗下的智能汽车操作系统及中间件产品提供商智达诚远作为高通生态伙伴&#xff0c;亮相首届“高通汽车技术与合作峰会”&#xff0c;通过产品展示和主题演讲呈现了基于高通骁龙数字底盘的最新智能座舱技术成果&#xff0c;共同展望智能网联汽…

GcExcel v6.1 支持新的 ‘.sjs‘ 模板文件 ‘.xltx‘ 格式 Crack

GrapeCity Documents for Excel (GcExcel) v6.1 版本现已上线&#xff01;该版本支持新的 SpreadJS .sjs 文件格式和 Excel 模板文件 .xltx 格式。此外&#xff0c;GcExcel 支持更多的SpreadJS兼容性功能和对 GcDataViewer 的多项增强。看看下面的主要亮点。 导入/导出 Spread…

Revit幕墙:用幕墙巧做屋面瓦及如何快速幕墙?

一、Revit中用幕墙巧做屋面瓦 屋面瓦重复性很高&#xff0c;我们如何快速的创建呢?下面我们来学会快速用幕墙来创建屋面瓦的技巧。 1.新建“公制轮廓-竖挺”族&#xff0c;以此来创建瓦的族(以便于载入项目中使用) 2.在轮廓族中绘制瓦的轮廓(轮廓需要闭合)&#xff0c;将族名称…

【JavaSE】Java基础语法(三十四):实现多线程

文章目录 1. 简单了解多线程2. 并发和并行3. 进程和线程4. 实现多线程方式一&#xff1a;继承Thread类【应用】5. 实现多线程方式二&#xff1a;实现Runnable接口【应用】6. 实现多线程方式三: 实现Callable接口【应用】7. 设置和获取线程名称【应用】8. 线程休眠【应用】9. 线…

Z-Library2023现状

网上基本上年年都会传出来Z-Library要被干掉的消息&#xff0c;我一直觉得&#xff0c;如果那真的发生了&#xff0c;会是人类的悲哀。 由于之前我存储的地址又挂了&#xff0c;所以紧急又寻找了一下。 1.朋友帮忙 朋友帮我搜了一下&#xff0c;发现有三个地址。 他说这第一个…

xlsx是什么格式

xlsx是什么格式? xlsx是Excel文档的扩展名&#xff0c;其基于Office Open XML标准的压缩文件格式&#xff0c;取代了其以前专有的默认文件格式&#xff0c;在传统的文件名扩展名后面添加了字母x&#xff0c;即.xlsx取代.xls。 xlsx文件是什么格式? xlsx是Excel表格的文件格…
最新文章