父组件:
<div id="app">
<child-a ref="child"></child-a>
<button @click="getMyEvent">点击父组件</button>
<div>
<script>
import ChildA from './child.vue'
export default{
components:{
ChildA
},
data(){
return {
msg:'我是父组件的数据'
}
},
methods:{
getMyEvent(){
//调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
this.$refs.child.emitEvent(this.msg)
}
}
}
</script>
子组件:
<template>
<button>点击我</button>
</template>
<script>
export default{
methods:{
emitEvent(msg){
console.log('接收的数据------'+msg)
}
}
}
</script>
子组件:
<template>
<button @click="emitEvent">点击我</button>
</template>
<script>
export default{
data(){
return{
msg:'我是子组件的数据'
}
},
methods:{
emitEvent(){
//通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
this.$emit('my-event',this.msg)
}
}
}
</script>
父组件:
<template>
<div id="app">
<child-a @my-event="getMyEvent"></child-a>
//父组件通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值。
</div>
</template>
<script>
import childA from './child.vue';
export default {
components:{
childA
},
methods:{
getMyEvent(msg){
console.log('接收数据---'+msg);
//接收数据,我是子组件的数据
}
}
}
</script>
首先创建一个Vue的空白实例(兄弟组件的桥梁)
import Vue from 'vue';
export default new Vue();
子组件A:发送放使用$emit自定义事件把数据带过去。
<template>
<div>
<span>A组件-{{msg}}</span>
<input type="button" value="把A组件数据传递给B" @click="send">
</div>
</template>
<script>
import eventBus from './eventBus';
export default{
data(){
return{
msg:{
a:'111',
b:'222'
}
}
},
methods:{
send(){
eventBus.$emit('aevent',this.msg)
}
}
}
</script>
子组件B:接收方通过$on监听自定义事件的callback接收数据
<template>
<div>
<span>B组件,A传的数据为--{{msg}}</span>
</div>
</template>
<script>
import eventBus from './eventBus.vue'
export default {
data(){
return{
msg:''
}
},
mounted(){
eventBus.$on('aevent',(val)=>{//监听事件aevent,回调函数要使用箭头函数。
console.log(val);//打印结果;我是a组件的数据。
})
}
}
</script>
父组件:
<template>
<div>
<childa></childa>
<br/>
<childb></childb>
</div>
</template>
<script>
import childa from './childa.vue';
import childb from './childb.vue';
export default{
componets:{
childa,
childb
},
data(){
return{
msg:''
}
}
}
</script>
async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代码,从而影响执行效率
->用来引用一个类的属性(变量)、方法(函数);=>是用来定义数组用的;::用来直接调用类中的属性或方法,没有实例化;$this->表示实例化后调用具体对象
React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。还有一种新的短语法可用于声明它们。
作为一个前端开发,在浏览别人家的页面时总是会习惯性的查看他们页面的源码,发现大多数网站的页面,包括我自己写的页面中用到的最多的布局元素无外乎就是div、p、span、ul、dl、ol、li、dt、dd、strong、b
this是JavaScript的一个关键字,函数调用时才会出现;因为函数是在一定的环境中运行的,调用函数时肯定需要知道是[谁调用的]?就用到了this进行指向;this 既不指向函数自身,也不指函数的词法作用域,而是调用函数时的对象!
标签语义化就是让元素标签做适当的事情。例如 p 标签就是代表文本,button 标签代表按钮,nav 标签代表导航等等。其实标签语义化是给浏览器和搜索引擎看的。
try-catch属于同步代码块,因此无法捕获异步(重新开辟的线程,例如定时器,异步请求)代码中的异常,即能被try-catch捕获的异常,必须是在报错时候,线程的执行进入了try-catch代码块时,才能被捕获异常
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!