本文详细介绍了Vue.js中父子组件间的通信，包括父组件如何传值给子组件，子组件如何反向传值，以及使用`$attrs`、`inheritAttrs`的细节。此外，还阐述了Vue的路由概念，包括前端路由的工作原理、路由的创建与配置、路由跳转、重定向、高亮、参数传递和组件嵌套。最后，提到了计算属性和监听器在Vue应用中的作用。
一、父组件传值子组件
1.接受父组件传值
设置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>2.属性继承的特征：
父组件的属性会覆盖子组件的属性
class 和 style 会进行合并，不会覆盖
3.设置禁用继承
加在子组件上的属性，使用了这个属性之后会阻止组件继承父组件的属性，但是class和style除外
inheritAttrs: false
4.在组件内可以使用$attrs获取父组件传过来的属性
5.data和props的区别
data是组件私有的，props是父组件传过来的
data是可以修改的，props是只读的
二、子组件传值父组件
1.子组件调用父组件的方法
1）在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
2）子组件可以触发这个事件$emit('事件名字')
2.子组件给父组件传递数据
1.）$emit方法第二个参数可以定义子组件给父组件传递的内容
2）在父组件中怎么拿到这内容
2.1 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
2.2 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。
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的使用
1.获取dom节点
1）给dom节点记上ref属性，可以理解为给dom节点起了个名字。
2）加上ref之后，在$refs属性中多了这个元素的引用。
3）通过vue实例的$refs属性拿到这个dom元素。
2.获取组件
1）给组件记上ref属性，可以理解为给组件起了个名字。
2）加上ref之后，在$refs属性中多了这个组件的引用。
3）通过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()
}
})四、什么是路由
- 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
- 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
- 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）
五、如何使用路由
- 引入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>
六、路由的跳转
- router-link标签可以设置to属性
- 默认是a标签，可以通过tag设置包裹标签
七、路由重定向
redirect可以进行路由的重定向
八、选中路由高亮
- 使用默认的样式
直接设置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>九、定义参数
通过query的方式在url后加?参数名=参数的值
获取参数：$route.query.参数名
十、使用浏览器参数的方式传递参数
- 设置路由的时候/路由地址/:参数名
- 获取参数$route.params.参数名
十一、组件的嵌套
- 声明路由的时候设置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>
十二、命名视图
- 我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
- 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>
十三、 计算属性和监听器
计算属性； 特点：当计算属性中所以来的任何一个 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>
扫一扫
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
