day4学习笔记
今天上午好困，前一个小时根本没进入状态，啥也没看懂。出去洗个脸才慢慢回过神。要是每天都有昨天那样好的状态就好了。
本来要学vue router里的组件传参的，结果提到的vue里的概念我都不明白。回去补去了。
- “#app”是隐形的根组件，相对于注册的全局组件来说，app是父组件，全局组件是子组件。
-
构造组件时的data（）{}选项。
data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，
然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。这个就是该组件的数据。
-
根据网上的写法，貌似在html中根据组件名使用组件，标签中指定的属性，应当是属于父组件里的数据，虽然这个属性不是初始化就定义了的。
-
组件定义时，props选项，可以接受父组件传递的数据。最终看如下代码
<div id="app"> <!--<root> 隐性的根组件,相对于注册的全局组件child来说，是父组件--> <child fatherdata="im your father"></child> <!--child相对root来说是子组件，而 fatherdata 这个变量是存在于父组件内的，应该属于父组件里的数据，虽然这个变量不是初始化就定义了的--> <!--</root>--> </div> <script> //注册一个全局组件，组件标签名为child Vue.component("child", { //组件构造器，此为一个对象，其中内容为多选项 props: ["fatherdata"], //接收父组件传递的数据 template: "<span>接受父组件传递的数据——> {{fatherdata}} <br> 子组件本身的数据——>{{$data.sondata}}</span>", //也可直接写sondata data() { return { sondata: "yes" }; }, //data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象， //然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。 //这才是子组件里面的数据 }); //实例化Vue new Vue({ el: "#app", data: {}, //这个数据是初始化Vue实例就定义的 }); </script>//显示结果。这样子组件就显示出了父组件的数据
但是我还没发现 把 父组件初始化时候指定的数据，通过子组件显示 的方法，以后多加留意
另外，组件可以为 props 指定验证要求。为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})路由组件传参。
有什么意义？先看下面代码
const User = {
template: '<div>User {{ $route.params.id }}</div>'
} 官网原话：在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
其实我心中一直有疑惑，在网上找到了相似的问题。
老师好，有关本章节中提到的props:true传递id优于直接在todo.vue中使用this.route.params.id，我有一点疑问。
我最初的理解：一开始听老师说props:true可以让todo组件更好被其他组件调用，我的理解是通过prop来传id，这样/app/:id和/item/:id这两种路径都能让todo.vue获取id，而this.route.params.id则只能获取/app/:id的id；
但之后老师又说this.route拿的是当前路径，那么this.$route也应该是两种路径都能获取id。
因此，我觉得老师指的是不是props可以传id，从而让没有id的路径也能保证todo.vue获取id呢？
还望老师解惑，谢谢老师。：）
用props更好是因为不需要依赖router，你的组件如果用在一个没有router的应用中那你用router获取，这个代码就运行不了了
心中的疑惑好像少了点，日后再回来看吧。先贴上跟着山地人哥一起敲出来的代码
<body>
<div id="app">
<router-view> </router-view>
<div>-----------</div>
<router-view name="sidebar"></router-view>
</div>
<script>
const User2 = {
template: "<div>User {{$route.params.id}}</div>",
//这个组件始终和route强关联了，只能在route里用。
};
const User = {
props: ["id"],
template: "<div>User {{id}}</div>",
};
const SideBar = {
props: ["title"],
template: "<div>User {{title}}</div>",
};
const router = new VueRouter({
routes: [
{ path: "/user/:id", component: User, props: true }, //如果 props 被设置为 true，route.params 将会被自动设置为组件属性。下面是几种手动设置参数的方法
{ path: "/user2", component: User, props: { id: 111 } }, //官网原话：如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
{
path: "/user3/:id",
component: User,
props: (route) => {
console.log(route); //其实这里打印出来，显示的id是上一个route的。刚刚试过了
return { id: route.params.id }; //创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
},
},
{
path: "/special",
components: {
default: User,
sidebar: SideBar,
},
props: {
default: { id: 789 }, //default:true 也行，自动传参
sidebar: { title: "hello" },
},
},
],
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
});
var vm = new Vue({
el: "#app",
router: router, //服了，刚刚居然没有吧router对象注入到vue实例中。还找错找半天
});
</script>
</body>上一篇： java第十八课时
下一篇： Android中Handler消息处理