VUE学习第五天（父子组件传参与路由）

最新推荐文章于 2022-09-09 11:28:03 发布

weixin_47774000

最新推荐文章于 2022-09-09 11:28:03 发布

阅读量316

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47774000/article/details/123786859

版权

一、父传子

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>

<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:'自定义的类名'

声明路由的时候设置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对应组件可以设置名字也可以访问

计算属性；特点：当计算属性中所以来的任何一个 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>

weixin_47774000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习第五天（父子组件传参与路由）

一、父传子app给father传值设置props属性就可以接受父组件传值<div id='app'> <father fromapp="接收app的值"></father> <father fromapp="appnumber"></father> <father></father> </div> <template id="fa...
复制链接

扫一扫