不想被开，就好好努力。早点来公司，学呗。学习学编程，脑子越用越活。朝着一个方向努力。学代码比种地除草好多了。不要着急，把一个一个知识点理清楚很重要。不想老了后悔，白白度过一生，就努力度过每一天。
看播放量最多的，就是经常用的。写一模一样的。
狂神说。晓舟报告。苛刻。慢慢来。工作很重要的课题。做个木匠。
敲得太少，多敲点。。。。。。。这个视频讲的不细致，可以多找几个视频看。看播放量最高的/pink老师的js。。。corderwhy 代码敲5遍6遍10遍抄下来多听课。多听课，看文档。看视频。
将子组件放入到父组件当中去，建立连接，父组件中可以显示子组件的信息
1.在父组件中import导入子组件
2.声明组件
3.在父组件的html中写子元素的标签。
完成，那么在父组件现实的时候就可以显示子组件的内容。
口诀：父传子，用属性。子传父，用事件。
父传子，用属性。
1）在父组件的子组件标签中写属性:msg="message"。在父组件的data方法中 返回声明数据。 只有data中声明了，别的地方才能写。任何时候，一定先声明。
2）怎么让子组件接受父组件的数据呢？将父组件中子组件标签绑定的属性msg，放到子组件export default下面的数组属性中props:“msg”。然后在子组件的html标签中写双大引号表达式，显示msg的值。
所以显示的时候，子组件的见面看到子组件的内容上面有父组件的值给了子组件显示出来了。
子传父，用事件。
1）子组件中的点击事件button会产生返回数据sendData(){}方法函数 。在button标签中绑定sendData()方法函数。 在methods中声明方法函数sendData(){}
2）在父组件中，和子组件有关系的是在父组件里的子组件标签。在子组 件标签中绑定自定义事件myevent="changeData"。事件绑定的是changeData(){}这个方法函数。changeData中的数据是来自子级传过来的。。。。。在父组件声明一个新的数据message:"",在父组件的html中写一个标签,里面写双大括号表达式。<h1>{{message}}</h1>
3）在父组件的子组件标签里绑定的事件，在子组件中sendData(){}可以通过this.$emit()方法来实现触发父组件中的方法，所以this.$emit方法后面，前面是父组件的方法，后面是值。this.$emit("myevent",this.message) 然后就触发了父组件中的myevent方法，把值传给了myevent绑定的changeData中的值，子组件导入的值，放在changeData(message)，放在changeData后面的小括号里面。。
4）在父组件中，可以用log控制栏检测一下，子组件的数据有没有传给父组件。然后写把传进来的数据复制给父组件中的数据。this.message=message;所以值在子元素被点击之后就变了。
所以在导出的过程中，按钮点击之前点击之后值会发生变化。。
例子还没有做。
非父子级传值：定义一个共享数据的状态。
两个同级的组件，互相之间传递数据。？？？？？没写完
state.js文件里的内容是
export default{
state：{
message:"hello vue"
},
setStateMessage(str){
this.state.message=str;
}
}
同级传值就是消息互通。同级传值的步骤：
在components下面新建两个同级组件brother.vue，sister.vue
创建App.vue父组件，父组件中导入两个统计的组件，声明组件，在html中写标签，就能显示出来两个组价的内容。
在src文件里新建一个state.js文件，相当于是公共变量。
在brother.vue和sister.vue中import导入store.js文件，然后data方法中声明一个数据：state:store.state; 把导入的store.js里的state的值赋值给brother里面的state的值。然后再brother的标签h1里面写表达式{{state.message}} 这里用的就是导入的state.js中的message。这样就把store.js中的值在brother中显示。
在Brother.vue中h1标签里面写了一个button标签，<button></button>改变数据，在button标签里面写了一个事件changeData，就是<button @click="changeData"></button>
因为在Brother的script中导入import了store.js文件（公共变量），所以在methods:{}中定义方法的时候，在方法中调用导入的store.js中的方法，state.js中的方法可以改变message的值。改变的值就写在调用的方法名后面的括号里。store.setStateMessage("改变变成这个数据brother data")
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
同级传值的步骤：
1）在src文件的components文件里新建2个vue组件。同级组件。
2）在src文件夹下面建立父组件App.vue，在父组件中的script下面把子组件import导入到父组件当中，在export default下面的components下面声明两个组件，在父组件html中写导入的组件标签，这样就可以显示。
在src文件夹下面新建store.js文件。相当于共享的变量。
在子组件中，在同级子组件中import导入js文件。声明data函数变量，把导入的store.js中的值赋值给声明的数据data(){return{state:store.state}}。然后在html中标签中写表达式，<p>{{state.message}}</p> ，这样就可以把store.js中的数据在子组件中显示出来了。写完一个，另一个子组件也这么做。
-----------
给子组件一个点击事件,<button>，button会触发一个点击事件。<button @click="changeData">改变数据</button>
在事件methods:{}中写数据的值。methods:{changeData(){store.StateMessage("这是同级组件的改变的一个数据")}}这里是调用的导进来的store的写的方法，就能够实现功能。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
多敲。
例子
<template>
<div>
<!-- 这是父组件App.vue -->
<!-- 为什么这么写？表达式，绑定data中的childData -->
<h1>{{childData}}</h1>
<!-- <div :msg="message">你好啊</div> -->
<!-- 3.使用组件，然后组件里的东西就可以显示出来的。meg是属性。事件。给child组件绑定一个方法myEvent.在这边会显示子组件的内容。 -->
<!-- ???子传父。利用事件传递。在父组件的子组件标签中写一个事件myEvent,myEvent的值是函数changeData -->
<ZiChild :msg="message" @myevent="changeData"></ZiChild>
</div>
</template>
<script>
// 今天学习任务。4 5 6 记不住记手写笔记。便于翻阅。要理解成自己的知识，为什么这么写才行。不写可以为什么不行？不会就要多看几遍，一直看，用心看。
// 组件嵌套。1把组件导入到这个要导入的文件中。2在export中新建组件。3在html中写组件标签。就把需要的组件导入进来了。就可以在界面显示了。
// 父级向子级传递数据，使用属性传递
// 1.导入子组件。
import ZiChild from "./components/ZiChild.vue";
export default {
// 2.新建组件
components:{ZiChild},
// 数据
data(){
// 返回数据
return{
// App.vue data这是App.vue里的数据
message:"app.vue data",
// 新建的数据
childData:""
}
},
// 子级向父级传递数据，使用自定义事件。
methods: {
// 自定义事件。在changeData中改变
changeData(childData){
// 这是调试数据，看看控制栏有没有数据显示输出，console.log就是输出的意思。
// console.log(childData);
// 显示出新的新的数据
this.childData=childData;
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 这是子组件ZiChild.vue -->
<h1>hello world你好世界</h1>
<!-- 在。显示export default里面的props -->
<div>{{msg}}</div>
<!-- 一个按钮的html,当点击时发送数据 -->
<button @click="sendData">点击按钮传递数据子传父</button>
</div>
</template>
<script>
// 子级向父级传递数据，用的是自定义事件
export default {
// 属性的特性，里面写信息。
props:["msg"],
data(){
return{
childData:"I'm child.子组件"
}
},
methods:{
sendData(){
// $emit的作用。$emit的方法就可以触发父组件的内容。$emit里面写的前面是写的自定义事件，后面是传的值。
// 上传的文件，这个旁边有改动的地方，那么就点击那个。
this.$emit("myevent",this.childData)
}
}
}
// 子级传给父级的步骤 子级向父级传递数据，使用自定义事件传值。
// 1）在子组件中，写button标签。。。。比如点击子级的按钮button。button元素标签。被点击之后触发了事件，传递给父级。
// 2）在子组件的一开始建立的三步。在父组件的子组件标签中，写上绑定的事件@myEvent="changeData"
同时在methods里面写上changeData(){}函数。在父元素的data里面声明一个数据childData:"",在div中标签中写表达式<h1>{{childData}}</h1>使用到data当中的数据。
changeData事件获取到子组件给父组件的值。
// 3）在子组件中，button绑定函数点击之后触发的事件@click="sendData"。
然后在子组件的方法methods中写函数sendData(){}
里面写this.$emit方法，用$this.emit就可以触发父组件的事件，this.$emit("myevent",this.childData)就可以触发父组件中的myevent的事件，后面写值。
// 在子组件中写data,data函数里面的声明变量childData:"I’m child" 就是data(){return{childData:"I'm child"}}
// 在子组件的methods的方法中写sendData(){this.$emit("myevent",this.childData)}
// 在父组件中的methods方法中写函数methods(childData){console.log(childData)}，把控制行改成this.chlidData=childData;
</script>
<style>
</style>
同级传值的步骤：
1）在src文件的components文件里新建2个vue组件。同级组件。
2）在src文件夹下面建立父组件App.vue，在父组件中的script下面把子组件import导入到父组件当中，在export default下面的components下面声明两个组件，在父组件html中写导入的组件标签，这样就可以显示。
在src文件夹下面新建store.js文件。相当于共享的变量。
在子组件中，在同级子组件中import导入js文件。声明data函数变量，把导入的store.js中的值赋值给声明的数据data(){return{state:store.state}}。然后在html中标签中写表达式，<p>{{state.message}}</p> ，这样就可以把store.js中的数据在子组件中显示出来了。写完一个，另一个子组件也这么做。
-----------
给子组件一个点击事件,<button>，button会触发一个点击事件。<button @click="changeData">改变数据</button>
在事件methods:{}中写数据的值。methods:{changeData(){store.StateMessage("这是同级组件的改变的一个数据")}}这里是调用的导进来的store的写的方法，就能够实现功能。
同级传值的例子如下：
<template>
<div>
<h1>这是1号demo<button @click="changeData">改变数据</button></h1>
<p>{{state.message}}</p>
</div>
</template>
<script>
import store from "../store"
export default {
data(){
return{
state:store.state
}
},
// 方法要写在methods里面。
methods:{
changeData(){
// 调用store中的方法改变数据
console.log(store);
store.setStateMessage("这是第1个demo中的方法。")
}
}
}
</script>
<style></style>
<template>
<div>
<h1>这是2号demo</h1>
<p>{{state.message}}</p>
</div>
</template>
<script>
import store from "../store"
export default {
data(){
return{
state:store.state
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 这是父组件App.vue -->
<!-- 用子组件标签就是显示这两个的意思。 -->
<DemoA1></DemoA1>
<DemoA2></DemoA2>
</div>
</template>
<script>
import DemoA1 from "./components/DemoA1.vue"
import DemoA2 from "./components/DemoA2.vue"
export default {
components:{
DemoA1,
DemoA2
}
}
</script>
<style></style>
// 这是store.js文件，相当于相同的共享的变量。建立在src文件夹下面。 export default { // 这个相当于是共享分变量。 // state是对象，默认暴露出去的对象。 state: { // 声明数据 message:"这是state.js文件的数据。" // message:"hello vue" }, // methods: { // 这个方法中的值是返回过来的值 setStateMessage(StateMessage) { // StateMessage = this.message; // 把传过来的值赋值给上面声明的state中的message this.state.message = StateMessage } // } }
同级传值 显示结果
-------------->>>练习：练习：购物车 敲2遍>看。
<template>
<div>
<ul>
<li v-for="(v,i) of fruits" :key="i">
{{v.name}}
单价：{{v.price}}
<button @click="sub">-</button>
<span>{{v.qu}}</span>
<button @click="add">+</button>
</li>
</ul>
<p>总价为{{totalPrice}}</p>
</div>
</template>
<script>
export default{
data(){
return{
fruits:[
{name:"苹果",price:2.50,qu:0},
{name:"香蕉",price:5.10,qu:0},
{name:"橙子",price:3.20,qu:0},]
}
},
methods:{
add(){
this.qu++
},
sub(){
this.qu--
}
},
computed:{
totalPrice(){
return this.price * this.qu;
}
}
}
</script>
看文档。