el:“#vue-app-one”,
components:{
“msg”: msgComponent
}
})
html文件中使用<msg></msg>：
这里是vue-app-one
我的爱好：
效果： 红框圈出的部分就是局部组件渲染出来的
父向子传值/传引用：prop
静态传值
创建子组件：
var titleComponent = {
props:[“title”],
template:<p>{{title}}</p>
// 所需要的数据title由父组件提供
}
在父组件的components属性中注册子组件：
new Vue({
el:“#vue-app-one”,
components:{
“msg”: msgComponent,
“titleComponent”:titleComponent
},
})
在父组件上使用子组件：
这里是vue-app-one
效果：红框标记处就是父向子传值并展示
动态传值：v-bind
定义子组件：
var titleComponent = {
props:[“title”],
template:<p>{{title}}</p>
}
在父组件的components属性中注册子组件：
new Vue({
el:“#vue-app-one”,
components:{
“msg”: msgComponent,
“titleComponent”:titleComponent
},
data(){
return {
title:"my hobbies are ",
}
}
})
使用子组件，通过绑定父组件data中的变量title来实现动态传值：
这里是vue-app-one
效果：红框处就是动态绑定获取数据的展示
传递数组等复杂数据时，也可以使用v-bind来动态传值，如：
需要向子级传递hobbies数组，在vue实例对象（父）中创建数据hobbies：
new Vue({
el:“#vue-app-one”,
components:{
“msg”: msgComponent,
“titleComponent”:titleComponent
},
data:{
title:"my hobbies are ",
hobbies:[‘看剧’,‘看动漫’,‘吃好吃的’], //需要向子组件传递的数据
}
})
定义子组件：
var msgComponent = {
template:`
{{hobby}}
`,
props:[“hobby”],
data(){
return {
}
}
}
使用子组件：
这里是vue-app-one
效果：
跳回“一点想法”处
子向父：事件传值$emit
子组件不能通过prop向父组件传递数据，需要使用事件向父组件抛出一个值，告知父组件我需要实现一个功能，由父组件处理这个事件
例子：点击按钮，改变名称chinesename
（由于data变量名不支持chinese-name形式，花括号里不支持chineseName形式，所以这里我都用了小写，此处记录一下，日后学到了新知再来填坑）
先在父组件的data中定义chinesename的初始值：
new Vue({
el:“#vue-app-one”,
data:{
chinesename:“anzhi” // chinesename初始值
}
})
创建子组件，并注册事件change-name（就像click事件一样，需要让系统能够辨认这是一个事件并监听，当事件被触发时，执行某项约定好的操作）：
Vue.component(‘blog-post’, {
props: [‘chinesename’],
template: `
{{ chinesename }}
修改名字
`
// blog-post组件包含一个h3，显示chinesename，和一个按钮
// 点击这个按钮，触发change-name事件，将"ruosu"作为参数传递给指定的处理函数onChangeName
})
在父组件中使用子组件，定义change-name的处理函数为onChangeName：
这里是vue-app-one
<blog-post
v-bind:chinesename=‘chinesename’
v-on:change-name = “onChangeName”
在父组件处定义事件处理函数onChangeName：
new Vue({
el:“#vue-app-one”,
data:{
chinesename:“anzhi”
},
methods:{
onChangeName:function(value){
// 将chinesename换成传递过来的数据
this.chinesename=value
}
}
})
效果：
一点想法
关于父子组件的区分，在此写一点总结，还是日后学了新知识再来填坑 ┗|｀O′|┛ 嗷~~
官网中没有很明确指明两者的定义和区别，在网上搜了一圈，觉得比较多人认可并且好理解的是：
-
el指定的根元素为父组件（使用之处为父组件）
-
vue实例对象也可看做组件
在前面这些父子传值的例子中，我们可以看到，对于局部组件，我们会在某个html根元素中注册并使用，所以此时el指定的根元素在html文件中是这个局部组件的父组件，局部组件在html使用时便是这个父组件的一份子，承担数据传输的责任
跳转到父向子动态传值案例
再用绕口令说一波，即：title-component组件定义处与使用处，两者身份是不一样的，在定义处，它是局部组件，也是子组件，需注册才能使用；在使用处，它是根元素的包含一部分，根元素为父组件，而“它”，承担着父组件与子组件数据沟通的重任
这个总结在全局组件情况下也适用，使用该全局组件的根元素是父组件，如上面的子向父传值的案例，div#vue-app-one是父组件，作为父子组件沟通的桥梁，全局组件blog-post为子组件
跳转到子向父案例
图示：
如果是子组件又嵌套了子组件，被嵌套的组件是子子组件，以此类推
使用脚手架创建项目并运用组件and传值
===================
CLI脚手架安装步骤可以看我的这篇文章。使用CLI脚手架创建项目，简单快捷，特别的是，页面内容和数据传递需要写在.vue文件里，每个vue文件为一个模块。
我们通过合理组装各模块（组件）来完成某项具体的功能，组件之间的配合以及父子传值的作用在此处体现得更明显一些。每一个vue文件都可看作一个组件，我们可以把页面按照需求划分成若干个部分，如导航栏，中间内容和底部三个部分。每个部分的实现分散到各子组件中完成，包括页面的展示和数据的获取。
如自定义博客页面：
- 主页面由vue-app主组件构成，包含导航栏、中间部分、底部栏三部分
- 导航栏由vue-header子组件完成
- 中间内容按照功能划分
* 添加博客：addBlob子组件
* 显示博客：showBlob子组件
* 修改博客：modifyBlob子组件
* 点击显示单篇博客内容：singleBlob子组件
- 底部信息栏由vue-footer完成
除了主页面，其他子部分和组件均根据功能划分，辅助主页面展示
个人博客父向子传值的示意图如下：
对象篇
模块化编程-自研模块加载器
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
