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的值。

所以显示的时候,子组件的见面看到子组件的内容上面有父组件的值给了子组件显示出来了。



           子传父,用事件。

1)子组件中的点击事件button会产生返回数据sendData(){}方法函数   。在button标签中绑定sendData()方法函数。 在methods中声明方法函数sendData(){}

2)在父组件中,和子组件有关系的是在父组件里的子组件标签。在子组 件标签中绑定自定义事件myevent="changeData"。事件绑定的是changeData(){}这个方法函数。changeData中的数据是来自子级传过来的。。。。。在父组件声明一个新的数据message:"",在父组件的html中写一个标签,里面写双大括号表达式。

{{message}}

       

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标签里面写了一个事件changeData,就是
因为在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中标签中写表达式,

{{state.message}}

  ,这样就可以把store.js中的数据在子组件中显示出来了。写完一个,另一个子组件也这么做。

-----------

给子组件一个点击事件,

在事件methods:{}中写数据的值。methods:{changeData(){store.StateMessage("这是同级组件的改变的一个数据")}}这里是调用的导进来的store的写的方法,就能够实现功能。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 多敲。






例子















同级传值的步骤:

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中标签中写表达式,

{{state.message}}

  ,这样就可以把store.js中的数据在子组件中显示出来了。写完一个,另一个子组件也这么做。

-----------

给子组件一个点击事件,

在事件methods:{}中写数据的值。methods:{changeData(){store.StateMessage("这是同级组件的改变的一个数据")}}这里是调用的导进来的store的写的方法,就能够实现功能。

同级传值的例子如下:





 








// 这是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遍>看。

 

看文档。

本科,研究生,博士生,找工作的起薪就不一样。三好学生,优秀毕业生20w起薪16万起薪,50万起薪年薪,所以最好还是好好读书啊。做好当下,一点点小的进步也是进步。

  再不学就要被开了,开了就很惨。

题目知识做多了就有了熟悉度。重复就是力量,书不成诵,无以至诗词之理。只有自己能管好自己,只有自己对自己的人生负责。对自己负责,管好自己,于谦。

想想怎么能在公司留下来,多努力,机会只给有准备的人。

 今天给自己的学习日报怎么打卡???

用自己的话能说出来才是掌握了。学明白。学的慢,但是要学明白。被开了怎么办???我要留下来喝水。直背。找光线好的地方。有自己的判断。是咸阳告诉我的。每个人走的路都不一样。秦始皇。社会在前进。人的能力有限,每个人都是一个人来一个人走,度过一生,投资自己,做好自己管好自己,最重要,没资格管别人。于谦。从小初中一周零花钱只有10元,自己安排。学习干活就是力量。简单一点。看懂的地方开始看。多看几遍。我的代码没学完。希望自己可以成为自己心中的自己。德配位。别人努力,为了月薪过万,省吃俭用,存钱啊。去学习让自己增长技术,能干活。时间不能白白流走。,十年磨一剑,上课时间认真听课。上班时间认真工作。 我喜欢一个地方就想一直在一个地方呆下去。沟通很重要。说话要看着别人眼睛。别说喜欢做什么工作不喜欢做什么工作,只是态度问题,你不做这个工作,做的工作就比这个更让你讨厌,所以就做好这份工作。别人努力读书985毕业起薪年薪一毕业就是16w。为什么不胖,因为努力学习努力工作认真做事,动脑。认真学习认真工作就消耗ATP。

在公司最重要的事情是干活态度端正,认真去做。在学校最重要的事情是学习。在努力,在学习在进步。做好自己,注重自己的感受和解决问题。理解了,就明白了。

思考就会消耗热量。。

你是自律的人吗?天下没有免费的午餐,要用努力去换取。

以前老师推荐我去做软件测试。

coderwhy