20、vue.js 之vue模板间的传值
1、引入的模板间传值
实际上就跟父组件跟子组件的传值处理方式一样。
App.vue代码
<template>
<div id="app">
<!-- 路由显示的地方 -->
<vheader :title="title"></vheader>
<router-view></router-view>
</div>
</template>
<script>
import header from "./components/header.vue" // 引入模板
export default {
// vue代码都在这里写
name: "app",
data () {
return {title: "hello chongqing!"}
},
components: {
vheader: header
}
}
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
说明：
header.vue代码
<template>
<div>
<h1>公共头部文件</h1>
<h3>{{title}}</h3>
</div>
</template>
<script>
export default {
props: ["title"]
}
</script>
说明：
2、路由视图传值
实际上也是跟父组件传值给子组件一样，只是哪个模板被加载，这个值就传给了那个模板
App.vue代码：
<template>
<div id="app">
<!-- 路由显示的地方 -->
<vheader :title="title"></vheader>
<!-- 在路由视图标签里面传值，则是传给了被加载的模板 -->
<router-view :title="title"></router-view>
</div>
</template>
<script>
import header from "./components/header.vue" // 引入模板
export default {
// vue代码都在这里写
name: "app",
data () {
return {title: "hello chongqing!"}
},
components: {
vheader: header
}
}
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
说明：
a.vue代码：
<template>
<div>
这里是a模板:{{title}}
</div>
</template>
<script>
export default {
props: ["title"]
}
</script>
说明：
index.js代码：
import Vue from "vue"
import Router from "vue-router"
import Hello from "@/components/Hello"
import a from "@/components/a"
Vue.use(Router)
export default new Router({
routes: [
{
path: "/",
name: "Hello",
component: Hello
},
{
path: "/a",
name: "a",
component: a
}
]
})
说明：
其他说明-网址的拼接：
1、直接按照平时的vue环境拼接，实际就是es6语法的字符串的拼接
2、直接按照js环境那样拼接：
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
