10- vue(伍)

1. vue父子组件传值

1.1 父传子

步骤简述：

1. 子组件中引入props，用来接受父组件数据
2. 父组件里的子组件标签中绑定父组件的数据

props内的写法：

props: {
    // 规定了父组件只能传字符串类型
    prop1: String,
    // 可以设置多个类型，可以传Number也可以传String
    prop2: [Number, String],
    prop3: {
        // 设置类型
        type: Array,
		// 设为必填字段
		required: true,
        // 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的
        default: function () {
            return [{
                name: '这个一个默认的名字'
            }]
        }
    },
}

1.2 子传父

步骤简述：

1. 子组件中通过某种方法触发$emit传值接口方法，$emit参数为自定义传值方法名，后面的是要传的子组件中的数据
2. 在父组件里的子组件标签中通过``@自定义传值方法名绑定父组件中的接收方法，接收方法`中的参数即为所传的子组件的值

    

        这里是父组件
        {{receivechild1}} {{receivechild2}}
        
    

2. ref的使用

给DOM节点和组件加上ref属性，用于获取DOM节点和组件

    

        登录
        
    

3. vue路由

路由的使用步骤

1. 引入js文件，这个js需要放在vue的js后面

2. 创建路由new VueRouter(),接受的参数是一个对象

3. 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性

4. path属性是url的地址,component属性就是显示的组件（传组件的对象）

5. 创建的路由需要和vue实例关联一下

6. 路由到的组件显示的位置

3.1 路由跳转

1. 引入router-link标签，并设置to属性

2. 默认编译成a标签，可以通过tag设置包裹标签

3.2 路由重定向

在new VueRouter()对象的routes属性中，使用redirect进行重定向

3.3 路由高亮

通过默认router-link-active类名设置点击后的路由链接样式

3.4 参数定义

两种路由传参的办法，query传参和params传参

1. 通过在的to属性中直接 ? 拼接的方法。通过在绑定to属性传对象，例如:to="{path:'/mine',query:{id:7}}"。通过$route.query.参数名来取到

2. 通过在routes列表中给路由添加name属性并在path后拼接/:变量名，在中给to绑定{name:'register',params:{id:6}}。通过$route.params.参数名来取到

    

        去登陆
        去注册
         去个人中心
        
    

3.5 路由嵌套

使用路由嵌套后必须在父组件中写入来给子组件预留位置

const routes = [
  {
    path: '/travel', component: TravelPage,
    children: [
      { path: '/travel/america', component: TravelAmericaPage },
      { path: '/travel/china', component: TravelChinaPage}
    ]
  },
  {
    path: '/about', component: AboutPage
  }
];

3.6 命名视图

命名视图可以做到一个地址对应多个组件

4. watch和computed

watch侦听属性：当data中的某个数据需要随其他数据的变化而变化时，更通用的方法是使用watch侦听器

watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }

computed计算属性：当需要对data的数据进行复杂逻辑操作的时候，应当使用computed属性

在computed里计算的属性不能生命在data中

computed: {
  Name: function () {
		//默认使用computed只有getter方法
        return this.firstName + ' ' + this.lastName
      	}
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

method、computed和watch的区别

1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；

2. methods方法表示一个具体的操作，主要书写业务逻辑；

3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体