一、父子组价间的传值
- 1.父组件传值给子组件
在父组件中使用子组件时，可以通过直接在子组件中添加属性来给子组件传值，像下面这样
<template>
<innerHeader @getkey="getkey" :btns="btns"></innerHeader>
</template>
<script>
import innerHeader from "../../components/innerHeader"
export default {
name: "ip_ping_index",
data() {
return {
current: 'ICMP',
btns: ['ICMP', 'TCPing', 'HPing']
}
},
components: {
innerHeader
}
}
</script>
父组件在使用子组件时，通过 :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.对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
data: {
activeColor: 'red',
fontSize: 30
}
</script>
<div v-bind:style="styleObject"></div>
<script>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
</script>
- 2.数组语法
<div v-bind:style="[baseStyles, overridingStyles]">
其中数组的元素是data中的对象，这样可以将多个样式对象同时应用在这个标签元素上
三、this.$route对象
在vue中，我们所看到的URL并不是正真的URL，它的所有路由都是使用hash来实现的，只是改变hash，不会导致页面跳转，所以又称单页面应用。这就使得我们无法正常使用window.lication对象。因为此时window.lication对象中的hash是整个#后面的部分，除非使用正则，否则我们无法直接获得其中的search等部分
这时，我们应该使用this.$route。this.$route.query可以获得 URL 中 ?后面的部分。
