美文网首页
vue项目中父组件向子组件传值

vue项目中父组件向子组件传值

作者: 刘HF_ | 来源:发表于2019-05-27 17:04 被阅读0次

    父子组件传值通过props实现,这种方式只能由父向子传递,子组件不能更新父组件内的data

    先定义一个子组件,在父组件中,引入子组件,并传入子组件内需要的值

    <template>

        <div>

            <div>父组件</div>

            <child :message="parentMsg"></child>  

        </div>

    </template>

    <script>

    import child from './child' //引入child组件

    export default {

    components: {

                child

            },

        data() {

                return {

                    parentMsg: 'father' 

                }

            }

    }

    </script>

    <style></style>

    子组件:

    <template>

        <div>

            <div>{{message}}</div>

        </div>

    </template>

    <script>

    export default {

        props: ["message"]

    }

    </script>

    <style></style>

    相关文章

      网友评论

          本文标题:vue项目中父组件向子组件传值

          本文链接:https://www.haomeiwen.com/subject/mvahtctx.html