}
});
//3.通过组件完成数据传递
总结:
1.使用组件时可以在组件上定义多个属性以及对应数据
2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值
3.在props中定义数据,不能在data中重复定义,如果重复定义,优先使用props中数据为主
14.4.2、通过在组件上声明动态数据传递给组件内部
//1.声明组件模板对象
const login = {
template: “
登录界面-{{title}}
data(){
return {
};
},
props:[‘title’], //props作用 用来接收使用组件时通过组件标签传递的数据
};
//2.注册局部组件
const app = new Vue({
el:“#app”,
data:{
msg: “Vue 中组件开发”,
name:“小李”,
},
methods:{},
computed:{},
components:{
login, //注册组价
}
});
//3.使用组件
//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化
14.4.3、prop的单向数据流
单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
-
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
-
额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。—摘自官网
14.5、组件中定义数据和事件使用
14.5.1. 组件中定义属于组件的数据
//定义局部用户列表组件配置对象
const users = {
template:“
用户列表-{{count}}-{{name}}
data(){ //用来给当前组件定义一系列数据 注意:在组件中定义的数据只能在当前组件中可用
return {
count:0,
name:“小李”,
};
}
};
14.5.2.组件中事件定义
//定义局部用户列表组件配置对象
const users = {
template:“
用户列表-{{count}}-{{name}}-{{countSqrt}}
<button @click=‘changeCount’>+- {{item}}
data(){ //用来给当前组件定义一系列数据 注意:在组件中定义的数据只能在当前组件中可用
return {
count:0,
name:“小李”,
//items:[“山西”,“北京”,“天津”],
items:[],
};
},
methods:{ //用来给当前组件定义一系列事件
changeCount(){
this.count++;
}
},
computed:{ //用来给当前组件定义一系列计算属性,用来对页面中结果进行二次计算处理时候
countSqrt(){
return this.count*this.count;
}
},
created(){ //组件已经注入了data、methods、computed 相关数据方法
//发送请求
/*axios.get(“/xxx”).then(res=>{
this.items = res.data;
});*/
this.items=[“山西”,“北京”,“天津”];
},
};
总结
1.组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可
2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例
14.6、向子组件中传递事件并在子组件中调用该事件
在子组件中调用传递过来的相关事件必须使用 this.$emit(‘函数名’) 方式调用
信息:{{msg}} 年龄:{{age}}
<login @aa=“findAll” @test=“test”>
14.7、插槽的使用
怎么理解插槽?
-
slot相当于一个空标签,通过vue可以实现动态改变值和样式,把一块区域内容抽了出来可以实现复用,就和Java里封装的工具类一样。
-
插槽就是子组件中的提供给父组件使用的一个占位符。
-
我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需要用到插槽来分发内容。
-
通俗易懂的讲,slot具有“占坑”的作用,在子组件占好了位置,那父组件使用该子组件标签时,新添加的DOM元素就会自动填到这个坑里面
{{msg}}
我是用户自定义aa内容
我是用户自定义bb内容
+++
15.1、路由
路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理
15.2、作用
用来在vue中实现组件之间的动态切换
15.3、使用路由
1、引入路由
//vue 路由js2、创建组件对象
//创建组件配置对象
const users = {
template:“
用户管理
};
const emps = {
template: “
员工管理
}
3、定义路由对象的规则
const router = new VueRouter({
routes:[
{path:‘/users’,component:users}, //用来定义具体得的某个组件路由规则 path:用来指定对应请求路径 component:指定路径对应的组件
{path:‘/emps’, component:emps } //用来定义一些规则
]
});
4、将路由对象注册到vue实例
const app = new Vue({
el:“#app”,
data:{
msg:“vue 中router(路由)的使用”,
},
methods:{},
computed:{},
components:{}, //注册局部组件
router:router, //用来注册路由配置
});
5、在页面中显示路由的组件
5、根据链接切换路由
15.4、router-link使用
作用: 用来替换我们在切换路由时使用a标签切换路由
好处: 就是可以自动给路由路径加入#不需要手动加入
用户管理(link)
员工管理(link)
总结:
1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签
15.5、默认路由
作用: 用来在第一次进入界面是显示一个默认的组件
const router = new VueRouter({
routes:[
//{ path:‘/’,component:login},
{path:‘/’,redirect:‘users’ }, //默认路由规则 redirect:(路由路径重定向)
{path:‘/users’,component:users}, //用户组件路由规则
{path:‘/emps’, component:emps } //员工组件路由规则
]
});
15.6、路由动态切换两种方式
方式一:通过使用标签方式直接进行路由切换
用户管理(link)
员工管理(link)
方式二:通过js代码的方式进行动态切换路由
<button @click=“test”>测试动态路由
const app = new Vue({
el:“#app”,
data:{
msg:“vue 中router(路由)的使用 route-link标签的使用”,
},
methods:{
test(){
console.log(“test”);
//this.$router.push(“/emps”); //代表切换路由路径
//this.$router.push({path:‘/emps’}); //切换路由
this.$router.push({name:“emps”}); //名称方式切换路由 [推荐]
},
},
computed:{},
components:{}, //注册局部组件
router, //注册路由
});
15.7、路由中参数传递
第一种方式传递参数 传统方式
1、通过?号形式拼接参数
用户管理
2、组件中获取参数
const users = {
template:“
用户管理
data(){
return {};
},
methods: {},
created(){
//获取路由路径中参数 1.获取queryString(deptid=21)中传递参数
//this.$route 当前路由对象
//this.$router 路由管理器对象
console.log(“deptid:”,this.$route.query.deptid);
console.log(“name:”,this.$route.query.name);
}
};
第二种方式传递参数 restful
1、通过使用路径方式传递参数
员工管理
const router = new VueRouter({
routes:[
{path:‘/emps/:id/:name’, name:‘emps’,component:emps } //员工组件路由规则
]
});
2、组件中获取参数
const emps = {
template: “
员工管理
data(){
return {};
},
methods: {},
created() {
console.log(“id:”,this.$route.params.id); //获取路径中的参数
console.log(“name:”,this.$route.params.name); //获取路径中的参数
}
}
完整代码
{{msg}}
用户管理
员工管理