父组件和子组件之间传递值

使用 props

props传递值 有规则的 在props中使用驼峰式命名 在模板中需要使用短横线

<div id="app">

        <div>{{pasm}}</div>

        <!-- 在父组件中调用

         title='来自父组件的值'传递给子组件 直接通过属性传递

        -->

        <men-item title='来自父组件的值'></men-item>

        <!-- 动态和静态也可以结合使用 -->

        <men-item v-bind:title='pti' conte="helllp"></men-item>

        <!-- props中使用驼峰式 在模板中只能使用com-new短线模式 -->

        <men-item comNew='来自父组件的值'></men-item>

    </div>

 

    <script>

        //  父组件向子组件传递值

        Vue.component('men-item', {

            // props传递值 有规则的 在props中使用驼峰式命名 在模板中需要使用短横线

            props: ['title', 'conte', 'comNew'],

            data: function() {

                return {

                    msg: '子组件的内容',

                }

            },

            // 驼峰式在字符模板中可以使用

            template: '<div>{{msg +"--- "+ title +"--- "+ conte}}</div>'

        })

 

        var vm = new Vue({

            el: '#app',

            data: {

                pasm: '父组件的内容',

                pti: '动态传递给子组件值'

            },

            methods: {

            }

        })

    </script>