0
点赞
收藏
分享

微信扫一扫

Vue中props的用法

西特张 2021-09-23 阅读 83

props的注意事项

作用:props是用于Vue中父组件子组件传值的时候使用。

  • props的传递是单向的。
  • 不要在子组件改变props的值。
1、props是单项传递
//语法说明
 <div id="app">
     <input type="text" v-model='value'/>
     父组件的值:{{ value }}
     <my-component :value='value'></my-component>
 </div>
//这里注册了一个全局组件
Vue.component('my-component',{
        props:['value'],
        template:`<div>
                       子组件的值:{{ value }}
                       <button @click='clickMe'>修改子组件的值</button>
                   </div>`,
        methods:{
            clickMe(){
                this.value = 123;
            }
        }
 })
//初始化Vue对象
var vm = new Vue({
     el: '#app',
     data:{
            value:'请输入内容'
     }
})
  • 可以看到在输入框我们输入的值,同时子组件的值也改变了。


  • 在我们点击按钮修改props的值时,子组件的值被修改,但父组件的值没有修改,并且控制台报错,要求我们不要尝试修改props的值。


2、不要在子组件改变props的值。
// 接收父组件的Value值,并将props的值赋予子组件的childValue当初始值。
// 通过改变childValue来实现效果
    Vue.component('my-component',{
        props:['value'],
        template:`<div>子组件的值:{{ childValue }}<br/><button @click='clickMe'>修改子组件的值</button></div>`,
        data(){
            return{
                childValue: this.value
            }
        },
        methods:{
            clickMe(){
                this.childValue = 123;
            }
        }
    })

3.注意

举报

相关推荐

0 条评论