vue.js（18）--父组件向子组件传值

Posted 2022-07-31 qiqisusu

子组件是不能直接使用父组件中数据的，需要进行属性绑定（v-bind:自定义属性名=“msg”），绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称。

props数组中的数据是只读的，父组件中的data是可读可写的。

子组件自己的data，子组件可直接访问，与父组件无关。

<div class="app">
        <mycom1 v-bind:mymsg="msg"></mycom1>
        <!-- 子组件想要使用父组件中的数据时，需要通过在父组件上进行属性绑定（v-bind），
            才能拿到父组件上的数据 -->
    </div>
    <template id="cmp1">
        <div>
            <h1>
                我是子一个组件+++我是父组件中的data通过props传递mymsg
            </h1>
            <h1>我是子组件中的data:mymsg1</h1>
        </div>
    </template>
    <script>
        var vm = new Vue(
        el:‘.app‘,
        data:
            msg:‘hahahah‘
        ,
        components:
            mycom1:
                template:‘#cmp1‘,
                props:[‘mymsg‘],//props是一个数组，用来定义属性绑定的父组件的数据，定义后才能使用
                data() //props中的数据是只读的，data中的数据是可读可写的
                    return
                        mymsg1:‘heheheheeh‘
                    //这里的data是子组件自己的数据，子组件可以直接访问，与父组件无关
                
            
        
    )  
    </script>