- 1Android WebView直接调用相机相册_android 网页app 调用打开相机
- 2pointnet语义分割_训练并预测自己的数据_pointrcnn训练自己的数据集
- 3Unity 十五 UGUI Canvas_gameobject canvas
- 4搭建Gitlab平台
- 5html的无语义标签：div & span
- 6单例模式双端检测详解
- 7Unity添加TouchScript插件_unitytouchscript插件
- 8Unity Entity Component System 2 --- Entities 实体_entities.automaticworldbootstrap.initialize
- 9Kitti数据集标签说明_kitti测试标签
- 10【Unity插件Mirror】射击游戏样例学习（二）_unity mirror isserver 未赋值
VUE学习第五天（父子组件传参与路由）_vue 父子路由
赞
踩
一、父传子
app给father传值
设置props属性就可以接受父组件传值
<div id='app'>
<father fromapp="接收app的值"></father>
<father fromapp="appnumber"></father>
<father></father>
</div>
<template id="father">
<div>{{msg}}
{{fromapp}}
</div>
</template>
<script>
Vue.component("father", {
template: "#father",
data() {
return {
msg: "哈哈哈"
}
},
props: {
fromapp: {
type: [String, Number],
default: "fromappnumber"
}
}
})
const vm = new Vue({
el: '#app',
data: {
appnumber: "啦啦啦啊"
},
methods: {}
})
</script>
二、子传父
子组件调用父组件的方法
在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
子组件可以触发这个事件$emit('事件名字'，传递数据)
data就是子组件传的值
<div id='app'>
<father></father>
</div>
<template id="father">
<div>father: {{fromsondata}}
<son @myson="fromson"></son>
</div>
</template>
<template id="son">
<div>son:
<button @click="tofather">给父传子参数</button>
</div>
</template>
<script>
Vue.component("father", {
template: "#father",
data() {
return {
msg: "哈哈哈",
fromsondata: ""
}
},
methods: {
fromson(data) {
console.log(data);
this.fromsondata = data
}
}
})
Vue.component("son", {
template: "#son",
data() {
return {}
},
methods: {
tofather() {
// 点击传参
this.$emit("myson", "子给父的值")
}
}
})
const vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
三、 ref的使用
给dom节点记上ref属性，可以理解为给dom节点起了个名字。
加上ref之后，在$refs属性中多了这个元素的引用。
通过vue实例的$refs属性拿到这个dom元素。
给组件记上ref属性，可以理解为给组件起了个名字。
加上ref之后，在$refs属性中多了这个组件的引用。
通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。
<div id='app'>
<son id="son1" ref="son1"></son>
{{sonmsg}}
</div>
<template id="son">
<div>
son
<button @click="log1" >点击</button>
</div>
</template>
<script>
Vue.component("son", {
template: "#son",
data() {
return {
msg: "哈哈哈"
}
},
methods: {
log1() {
console.log(11111);
}
}
})
const vm = new Vue({
el: '#app',
data: {
sonmsg: ""
},
methods: {},
mounted() {
console.log(this.$refs);
this.sonmsg = this.$refs.son1.msg
this.$refs.son1.log1()
}
})
四、Vue中路由的使用
（1）、什么是路由
后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
（2） 、如何使用路由
引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
创建路由new VueRouter(),接受的参数是一个对象
在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
path属性是url的地址,component属性就是显示的组件（传组件的对象）
创建的路由需要和vue实例关联一下
路由到的组件显示在哪个位置<router-view></router-view>
<!-- 5/展示区域 -->
<router-view></router-view>
</div>
<template id="index">
<div>
index首页
</div>
</template>
<template id="detail">
<div>
详情页
</div>
</template>
<script>
let index = {
template:"#index"
}
let detail = {
template:"#detail"
}
// 2.创建vuerouter实例
const router = new VueRouter({
// 3.创建映射关系
routes:[
{
// 路径
path:'/',
// 对应组件
component:index
},
{
path:"/detail",
component:detail
}
]
})
const vm = new Vue({
el: '#app',
data: {
},
methods: {
},
// 4.将路由挂载在vue实例上
// router:router,
router
})
</script>
（3）、路由的跳转、路由重定向、选中路由高亮
router-link标签可以设置to属性
路由高亮：
使用默认的样式，直接设置router-link-active
自定义样式，配置 linkActiveClass:'自定义的类名'
<style>
.router-link-active {
color: red;
}
</style>
</head>
<body>
<div id='app'>
<router-view></router-view>
<router-link to="/">首页</router-link>
<router-link to="/detail">详情页</router-link>
</div>
<template id="index">
<div>
首页
<!-- 声明式跳转 -->
<router-link :to="{path:'/detail',query:{courseid:103,age:20}}">详情页</router-link>
<!-- 函数式跳转 -->
<button @click="todetail">跳转</button>
</div>
</template>
<template id="detail">
<div>
详情页
<router-link to="/">首页</router-link>
{{demsg}}
</div>
</template>
<script>
let index = {
template: "#index",
// 函数式跳转
methods: {
todetail() {
console.log(this.$router);
this.$router.push({
path: '/detail',
query: {
name: '王五'
}
})
}
}
}
let detail = {
template: "#detail",
data() {
return {
demsg: "哈哈哈哈"
}
}
}
let router = new VueRouter({
routes: [
// 重定向
{
path: '/',
redirect: '/index'
}, {
// path: '/',
path: '/index',
component: index
}, {
path: "/detail",
component: detail
}
]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router
})
</script>
（4）路由的嵌套
声明路由的时候设置children,这是children是一个数组，数组里是路由对象
这个children的组件就会渲染在它父组件的<router-view>中
<div id='app'>
<router-view></router-view>
</div>
<template id="index">
<div>
首页
<router-link :to="{path:'/detail',query:{courseid:103,age:20}}">详情页</router-link>
<router-view></router-view>
</div>
</template>
<template id="detail">
<div>
详情页
<router-link to="/">首页</router-link>
{{demsg}}
</div>
</template>
<template id="other">
<div>
other页面
</div>
</template>
<script>
let index = {
template: "#index"
}
let other = {
template: "#other"
}
let detail = {
template: "#detail",
data() {
return {
demsg: "卡卡卡"
}
}
}
const router = new VueRouter({
routes: [{
path: '/',
redirect: '/index'
}, {
path: '/index',
component: index,
children: [{
// 不能加/
// path:'/other'
path: "other",
component: other
}]
}, {
path: "/detail",
component: detail
}]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router
})
</script>
（5）命名视图
我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
components属性设置的
给router-view设置名字，这个名字和components组件名字是对应的
设置默认值default对应组件可以设置名字也可以访问
<style>
.box {
display: flex;
}
.box div {
width: 200px;
height: 100vh;
background-color: green;
}
.box div:nth-of-type(2) {
background-color: red;
flex-grow: 1;
}
</style>
</head>
<body>
<div id='app'>
<router-view></router-view>
<div class="box">
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
</div>
<template id="index"><div>首页</div></template>
<template id="left"><div>左</div></template>
<template id="right"><div>右</div></template>
<script>
let index = {
template: "#index"
}
let left = {
template: "#left"
}
let right = {
template: "#right"
}
const router = new VueRouter({
routes: [{
path: '/',
redirect: '/index'
}, {
path: '/index',
components: {
default: index,
left,
right
}
}]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router
})
</script>
（6）计算属性和监听器
计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
<div id='app'>
<input type='text' v-model="firstname">+
<input type='text' v-model="lastname">=
<input type='text' v-model="fullname">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
// fullname: ''
},
methods: {
},
// 属性监听
// watch: {
// 'firstname': function(newvalue, oldvalue) {
// // console.log(newvalue);
// // console.log(oldvalue);
// this.fullname = this.firstname + this.lastname
// },
// 'lastname': function(newvalue, oldvalue) {
// this.fullname = this.firstname + this.lastname
// }
// }
// 计算属性
computed: {
fullname: {
get: function() {
return this.firstname + '-' + this.lastname
},
set: function(value) {
this.firstname = value.split("-")[0]
this.lastname = value.split('-')[1]
}
}
}
})
</script>
