vue晓舟报告第4课 组件传值 父传子 子传父同级组件传值 vue知识2 代码敲5遍6遍10遍抄下来多听课。
不想被开，就好好努力。早点来公司，学呗。学习学编程，脑子越用越活。朝着一个方向努力。学代码比种地除草好多了。不要着急，把一个一个知识点理清楚很重要。不想老了后悔，白白度过一生，就努力度过每一天。
这份工作没了，能做什么工作？这最重要。 敖丙。
周，毛马路边看书，专心。艾跃进。易中天 夹起尾巴做人，埋下头去读书。功不唐捐。每天有进步最重要。
看播放量最多的，就是经常用的。写一模一样的。
狂神说。晓舟报告。苛刻。慢慢来。工作很重要的课题。做个木匠。
敲得太少，多敲点。。。。。。。这个视频讲的不细致，可以多找几个视频看。看播放量最高的/pink老师的js。。。corderwhy 代码敲5遍6遍10遍抄下来多听课。多听课，看文档。看视频。
将子组件放入到父组件当中去，建立连接，父组件中可以显示子组件的信息
1.在父组件中import导入子组件
2.声明子组件
3.在父组件的html中写子元素的标签。
完成，那么在父组件现实的时候就可以显示子组件的内容。
口诀：父传子，用属性。子传父，用事件。
例子 例如呢？例题。 自己去学去百度。 热爱生命汪国真 冰心
父传子，用属性。
1）在父组件的子组件标签中写属性:msg="message"。在父组件的data方法中 返回声明数据。 只有data中声明了，别的地方才能写。任何时候，一定先声明。
2）怎么让子组件接受父组件的数据呢？将父组件中子组件标签绑定的属性msg，放到子组件export default下面的数组属性中props:“msg”。然后在子组件的html标签中写双大引号表达式，显示msg的值{{msg}}。
所以显示的时候，子组件的界面看到子组件的内容上面有父组件的值给了子组件，显示出来了。
子传父，用事件。
1）子组件中的点击事件button会产生返回数据sendData(){}方法函数 。在button标签中绑定sendData()方法函数。 在methods中声明方法函数sendData(){}
2）在父组件中，和子组件有关系的是在父组件里的子组件标签。在子组件标签中绑定写自定义事件myevent="changeData"。事件绑定的是changeData(){}这个方法函数。changeData中的数据是来自子级传过来的。。怎么从子级传过来的？。。。。。。。。。。。在父组件data声明一个新的数据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>
看文档。
