第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

vue2.0中組件傳值理解

標(biāo)簽:
Vue.js

vue学习一般先从官网学习开始(https://cn.vuejs.org/
因为英语水平一般,所以也就从中文文档开始撸起。
vue中比较好理解的部分包括:
1.声明式渲染
2.条件和循环
3.处理用户输入(表单输入相关)
以上官网也对应有相关例子,比较容易理解
实际项目中最常用到也是有点难理解的是组件相关的内容。组件可以理解为一个拥有自定义选项的vue实例,在我的理解就是可以重复使用的网页的一部分(包含DOM结构以及数据逻辑变化)。
我就以我理解的谈谈组件传值:
一:父组件向子组件传值
1)组件的创建

<template>
    <div>
            <h2>子组件Child</h2>
            <p>{{ msg }}</p>
    </div>
</template>
<script>
export default{
    props:['msg']
}
</script>

2.组件注册

<template>
    <div id="app">
            <child msg = "hello vue"></child>
    </app>
</template>
<script>
    import child from './components/Child'
    export default{
        name:'app',
        components:{
            child
    }
}
</script>

此时可以在浏览器中看到hello vue值已经传递过去;
我们也可以将msg的值用v-bind动态绑定

<template>
    <div id="app">
            <child :msg = "showMsg"></child>
    </app>
</template>
<script>
    import child from './components/Child'
    export default{
        name:'app',
      data(){
            return{
                    msg:'hello parentComponent'
        }
    },
        components:{
            child
    }
}
</script>

总结:父组件向子组件传值四部走:
1.子组件在props中创建一个属性,用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件在props中创建的属性
4.把需要传给子组件的属性赋值

二 子组件向父组件传值
1.在子组件中创建一个按钮,并绑定一个点击事件,同时在响应该事件的函数中使用$emit来触发一个自定义事件,并传递一个参数

<template>
    <div>
            <h2>子组件Child</h2>
            <p>{{ msg }}</p>
            <button v-on:click="sendMsgToParent"></button>
    </div>
</template>
<script>
 export default{
        props:['msg'],
        methods:{
                sendMsgToParent:function(){
                        this.$emit('listenChildEvent','this msg from child');
                }
        }
}
</script>

2)在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<template>
    <div id="app">
            <h2>父组件Child</h2>
            <child msg="hello vue"  v-on:listenChildEvent="showMsg"></child>
    </div>
</template>
<script>
 export default{
       name:'app',
        methods:{
                showMsg:function(data){
                        alert(data);
                }
        }
}
</script>

总结:
1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

三 组件与组件之间通信可以用vuex来管理非常方便。

学习一门语言最快的方法就是自己去实践,写一些简单功能的页面。现在有很多开源的api接口提供出来,或者自己模拟数据。总之,坑要自己踩了才会走的更快。

點(diǎn)擊查看更多內(nèi)容
3人點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消