Vue学习笔记（一）

一、父子组价间的传值

• 1.父组件传值给子组件
  在父组件中使用子组件时，可以通过直接在子组件中添加属性来给子组件传值，像下面这样

父组件在使用子组件时，通过 :btns="btns"将自己data中的btns传递给了子组件。
而子组件则应该接收，像下面这样

export default {
        name: "innerHeader",
        props: {
            btns: {
                type: Array, //规定传入的格式
                required: true //声明这个参数是否必须传入
            }
        }

这样子组件就拿到了父组件传来的值，直接通过btns就可以拿到，就像拿data里面的数据一样。

• 2.子组件传值给父组件
  父组件给子组件的传值有props这座桥梁，而子组件要传值给父组件，就没有那么方便了，只能通过触发函数的方式。这个过程有点复杂，用文字不好描述，回头我会在这里补一张手写的笔记照片。先留个坑。

二、 v-bind:style

可以简写为 :style ,用于为元素添加行内样式。当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue 会自动侦测并添加相应的前缀。

• 1.对象语法

• 2.数组语法

其中数组的元素是data中的对象，这样可以将多个样式对象同时应用在这个标签元素上

三、this.$route对象

在vue中，我们所看到的URL并不是正真的URL，它的所有路由都是使用hash来实现的，只是改变hash，不会导致页面跳转，所以又称单页面应用。这就使得我们无法正常使用window.lication对象。因为此时window.lication对象中的hash是整个#后面的部分，除非使用正则，否则我们无法直接获得其中的search等部分
这时，我们应该使用this.$route。this.$route.query可以获得 URL 中 ?后面的部分。