父组件传子组件

1、子组件传参值
2、props接受传值
  props表示类型三种方式:
    1、单类型 表示接收的值为string类型
               sonname: String
               2、多类型 表示接受的值类型可以为string或number
               sonname:[String,Number]
               3、设置默认值 表示默认类型为String  默认值为张三
      sonname:{
                        type:String,
                        // 设置默认值,这里没用到,在接口请求数据可能使用
                        // sonname:"张三"
              }
3、使用接收到的值
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <!-- 相当于父组件 -->
    <div id=‘father‘>
        <!-- 1、子组件传参值 -->
        <son sonname=‘李四‘></son>
    </div>
    <template id="son">
        <div>
            父组件 {{sonmsg}} 
            <!-- 3、使用接收到的值 -->
            {{sonname}}
        </div>
    </template>

    <script>
        Vue.component(‘son‘, {
            template: ‘#son‘,
            // data使用返回值表示
            data() {
                return {
                    sonmsg: ‘父元素信息‘
                }
            },
            // 2、props接受传值
            props: {
                // 1、单类型 表示接收的值为string类型
                // sonname: String
                // 2、多类型 表示接受的值类型可以为string或number
                // sonname:[String,Number]
                // 3、设置默认值
                sonname:{
                    type:String,
                    // 设置默认值,这里没用到,在接口请求数据可能使用
                    // sonname:"张三"
                }
            }
        })
        const vm = new Vue({
            el: ‘#father‘,
            data: {
            },
            methods: {
            },
        })
    </script>
</body>

</html>

 

父组件传子组件

上一篇:什么是 inode ?


下一篇:04 requests 高级(cookie,代理,验证码识别)