快捷導(dǎo)航

vue子組件如何使用父組件傳過(guò)來(lái)的值

更新時(shí)間：2022年04月08日 11:29:09 作者：我是小路路呀

這篇文章主要介紹了vue子組件如何使用父組件傳過(guò)來(lái)的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

子組件使用父組件傳過(guò)來(lái)的值

父組件

<alarmstatistics :roless.sync="role"></alarmstatistics>
??import alarmstatistics from "./alarmstatistics.vue";
? components: {
? ? alarmstatistics,
? },

子組件

? props: ["roless"],
??
? data() {
? ? return {
? ? ? role:this.roless,
? },
??
? mounted() {
? ? if(this.role==3){
? ? ? this.chartY = "9.5%";
? ? }else{
? ? ? this.chartY = "18%";
? ? }
? },

如果是使用父組件接口返回來(lái)的值，在html中直接使用

? props: ["infoDatac"],
? ? ? <li
? ? ? ? v-for="(item,i) in infoDatac.notice.admitted"
? ? ? ? :key="'A'+ i"
? ? ? >
? ? ? ? <div>申請(qǐng)單號(hào)：{{ item.applyCode }}</div>
? ? ? ? <div>使用時(shí)間：{{ item.useTime }}</div>
? ? ? ? <span>{{ item.title }}</span>
? ? ? </li>

vue子組件調(diào)用父組件數(shù)據(jù)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="" id="myVue">
            <my-component>
            </my-component>
        </div>
        <!--子組件-->
        <template id="child"  >
            <div id="">
                <div @click='changedata'>子組件：{{data}}</div>
            </div>
        </template>
        <!--父組件-->
        <template id="father">
            <div>
                <mycomponent-child v-bind:data="str"></mycomponent-child>
            </div>
        </template>
    </body>
    <script type="text/javascript" charset="utf-8">
        /*在父組件中的數(shù)據(jù)str，
         * 將父組件的數(shù)據(jù)綁定到子組件的屬性data上
         * 然后在子組件中就可以通過(guò)props接收到，
         * 這樣在子組件中就可以使用變量 this.data1訪問(wèn)到 父組件的 str1對(duì)應(yīng)的值了。
         */
        //當(dāng)點(diǎn)擊子組件，觸發(fā)子組件的changedata方法，通過(guò)this.data = "父組件值被子組件修改了";改變了父級(jí)的str的值
        //通過(guò)  this.$parent.fn()訪問(wèn)父組件的方法fn()。
        var child={
            props:["data"],
            template:"#child",
            data:function(){
                return{
                    str:"我是子組件數(shù)據(jù)"
                }
            },
            methods:{
                changedata:function(){
                    this.data = "父組件值被子組件修改了";
                    this.$parent.fn();
                }
           }
        }
        
        /*父組件*/
        var father={
            template:"#father",
            data:function(){
                return{
                    str:"我是父組件數(shù)據(jù)"
                }
            },
            methods:{
                fn:function(){
                    alert("我是父組件方法")
                }
            },
            components:{
                "mycomponentChild":child
            }
        }
        
        vm=new Vue({
            //el:"#myVue",
            components:{
                "myComponent":father
            }
        }).$mount('#myVue');
        
    </script>
</html>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: