vue踩坑_cli_父子传值和router

父子传值：

1.父传子

很简单，使用 v-bind 绑定给子组件就好了，对应的子组件使用props接一下就好

data中的mes，message，list都是向子组件传的值

data () {
    return {
      message:"send code",
      mes:"子向父组件穿的值",
      getChildrenMes:'',
      list:[{
        "姓名":"朱富强",
        "年龄":"23",
        "生日":"951120",
        "性别":"男"},
        {"姓名":"许淑名",
        "年龄":"23",
        "生日":"951120",
        "性别":"男"},
         {"姓名":"翠琴",
        "年龄":"23",
        "生日":"951120",
        "性别":"男"},
        { "姓名":"腾蛟",
        "年龄":"23",
        "生日":"951120",
        "性别":"男"
      }]
    }
  },

用v-bind绑定到模板中

<appHeader v-bind:mes="mes"></appHeader>
<appSection v-bind:list="list" @childToFather="children_mes_handle"></appSection>
<appFooter v-bind:mes="message"></appFooter>

使用props获取，props写在data上边就可以。这是完整形式，也可以简写成数组形式

props:{
      list:{
        type:Array,
        required:true
      }
  },

简写：

prop:['list'];

如果传了多个值过来，获取方式相同，就接着写就好了，比如

props:{
      list:{
        type:Array,
        required:true
      },
    mes:{
        type:String,
        required:true
      }
},//完整形式
props:["list","mes"];//简写形式

props获取到的值，直接用就行了，就和在data中的值一样

另外，传值的时候，数据类型会有所区别。比如说，string，number，布尔，这些叫传值，而array，object叫传引用

传值与传引用区别就是：

传值，你在子组件改变这个值，不会对其他也接收这个值的子组件有影响，传过来就是你的了，可以随便更改。

传引用，子组件更改传引用过来的数据，其他页面，如果也接收了这个数据，那么也会跟着改变。

个有优劣.......根据情况选择。

如果想要传值，但是还想让其他子组件数据也更改，那么可以在改变了数据后使用$emit()再传给父组件。

如果用的是传引用，还不想更改其他组件数据，那么可以在接收数据后，把数据赋给一个变量，然后操作数据就好了。

2.子传父

子组件给父组件使用$emit,$emit("创建的事件名"，"要传的值")，然后再父组件中使用创建的函数名接收。

 <button @click="sendmes">DO</button>

先根据情况绑定事件触发传值操作。在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

 methods:{
    sendmes:function(){
    this.$emit("childToFather",this.message)
    }
  }

然后来到父组件这边，在相应的子组件里绑定事件，事件名是子组件$emit()写入的第一个参数，紫色字是在父组件添加的一个响应该事件的处理方法，用来接收子组件传来的值。

 <appSection v-bind:list="list" @childToFather="children_mes_handle"></appSection> 

这里的data就是子组件传来的值。就是说，子组件中写在$emit里的第二个参数会被当成传参放入你写的接收函数里。

 methods:{
children_mes_handle:function(data){
        this.getChildrenMes=data
    } }

3.router

vue里的路由，搭建脚手架时会有选择，如果你选择了yes，那么直接用就可以了。

在main.js里加入 

import router from './router';

然后在router文件夹index.js里配置要去的路径,mode:"history",是为了去掉浏览器地址栏里默认的#号

用的时候和<a herf=""></a>标签类似，使用<router-link to=""></router-link>,别忘了加个<router-view/>，用来展示跳转的页面。单标签就可以。

如果创建cli时候没选择安装路由，那就可以省去router文件夹里index.js的操作了，直接在main.js中配置就好了。

先用import引入，然后Vue.use(VueRouter)，然后配置路由，然后别忘了在vue实例中添个router