<script><br> var vm = new Vue({<br> el: '#app',<br> data: {<br> msg: '父组件'<br> },<br> components: {<br> son: {<br> template: '<h1>子组件 --- {{finfo}}</h1>',<br> props: ['finfo'] // 把父组件传递过来的 finfo 属性，先在 props 数组中，定义一下，这 样，才能使用这个数据<br> }<br> }<br> });<br> </script>
注意：先使用 props定义一下才能使用， props 中的数据，都是只读的，无法重新赋值 2. 使用 v-bind或简化指令，将数据传递到子组件中：
原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
<son @func="getMsg"></son>
子组件内部通过 this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用
<div id="app"><br> <!-- 引用父组件 --><br> <son @func="getMsg"></son><br><br> <!-- 组件模板定义 --><br> <script type="x-template" id="son"><br> <div><br> <input type="button" value="向父组件传值" @click="sendMsg" /><br> </div><br> </script><br> </div><br><br> <script><br> // 子组件的定义方式<br> Vue.component('son', {<br> template: '#son', // 组件模板Id<br> methods: {<br> sendMsg() { // 按钮的点击事件<br> this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去<br> }<br> }<br> });<br><br> var vm = new Vue({<br> el: '#app',<br> data: {},<br> methods: {<br> getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义<br> alert(val);<br> }<br> }<br> });<br> </script>
后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
1.1先引入 vue-router组件库，注意 vue包先引入， vue-router是依赖于vue的。
<script src="./lib/vue-2.4.0.js"></script><br><br><script src=". lib vue-router-3.0.1.js">  <br></script src=".>
1.2创建vm实例
var vm = new Vue({<br> el:'#app',<br> data:{},<br> methods:{},<br> router:routerObj<br> })
vm实例中，使用 router 属性来使用路由规则
1.3创建路由对象
var routerObj = new VueRouter({<br> routes:[ <br> {path:'/',redirect:'/login'},<br> {path:'/login',component:login},<br> {path:'/register',component:register}<br> ]<br>})
路由对象中参数解释：
routes[]——路由匹配规则
path——表示监听 哪个路由链接地址
component——如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称
redirect——重定向
1.4定义两个路由组件
var login = {<br> template:'<h1>登录组件</h1>'<br>}<br>var register={<br> template:'<h1>注册组件</h1>'<br>}
1.5使用 router-view来显示匹配到的组件
<div id="app"><br> <a href="#/login">登录</a><br> <a href="#/register">注册</a><br><br> <router-link to="/login"></router-link><br> <router-link to="/register"></router-link><br><br> <!-- router-view相当于占位符 --><br> <router-view></router-view><br></div>
使用 children实现路由的嵌套
//创建一个路由对象<br>//在new路由对象的时候可以为构造函数，传递一个配置对象<br>var router= new VueRouter({<br> routes:[ //路由匹配规则<br> {<br> path:'/com',<br> component:com,<br> children:[<br> {path:'login',component:login},<br> {path:'register',component:register}<br> ]<br><br> },<br> ]<br>})
使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
<div id="app"><br> <router-link to="/account">Account</router-link><br> <router-view></router-view><br></div><br><br><template id="com"><br> <div><br> <h1>这是一个account组件</h1><br> <router-link to="/com/login">登录</router-link><br> <router-link to="/com/register">注册</router-link><br><br> <router-view></router-view><br> </div><br></template><br>
Original: https://www.cnblogs.com/zdh052286/p/12544494.html
Author: 清酒一杯
Title: vue组件传值和路由——day04
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/581589/
转载文章受原作者版权保护。转载请注明原作者出处！