0
点赞
收藏
分享

微信扫一扫

vue 中NonProp的使用

大自然在召唤 2022-03-11 阅读 45

一.子组件代码

<template>
    <div>
        <p>通过prop接收:{{content}}</p>
        <p>通过NonProp接收:{{$attrs.nonPropContent}}</p>
    </div>
</template>

<script>
export default {
    name:'NonProp',
    props:['content']
}
</script>

二:父组件调用

<template>
    <div>
        <p>页面上的值:</p>
        <p>通过视图层,修改myValue</p>
        <input v-model="myValue" style="width:400px"/>
        <hr/>
        <input type="button" @click="changeMyValueByCode()" value="通过代码修改myValue" />
        <hr/>
        <input type="button" @click="showMyValue()" value="显示代码中的myValue"/>
        <br />
        <non-prop :content="content" :nonPropContent="nonPropContent"></non-prop>  //父组件调用子组件
    </div>
</template>

<script>
import NonProp from '@/components/NonProp'
export default {
    name:"TwoWayBInding",
    components:{
        NonProp
    },
    data(){
        return{
            content:'当你走上不一样的道路,你才会看到不一样的风景',
            nonPropContent:'兴趣是最好的老师'
        }
    },
    methods:{
        showMyValue(){
            alert("myValue:"+this.myValue)
        },
        changeMyValueByCode(){
            this.myValue+=",在代码中修改,666."
        }
    }
}
</script>
举报

相关推荐

0 条评论