vue 中NonProp的使用

一.子组件代码

<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>