• Vue基础 の 组件 父 --> 子 de传值


    Step1: 父组件调用 子组件  父组件通过 标签上的属性向子组件传值

    Step2:子组件通过 props 接受父组件传送的属性,子组件便可以使用。

    静态传值:

        <script>
            const root = Vue.createApp({
                template:`
                    <div> 
                        <component—childer content='我是父组件传送的值啊'/>
                    </div> `
            })
            root.component('component—childer',{
                props:['content'],
                template:` <div>{{content}}</div> `
            })
            root.mount('#app')
        </script>

    动态传值: v-bind 

      1.  通过data 定义数据 v-bind绑定传送数据

        <script>
            const root = Vue.createApp({
                data(){
                    return{
                        content:'我是父组件 传送的动态数据'
                    }
                },
                template:`
                    <div> 
                        <component—childer :content='content'/>
                    </div>
                `
            })
            //定义 全局组件
            root.component('component—childer',{
                props:['content'],
                template:` <div>{{content}}</div> `
            })
            root.mount('#app')
        </script>

      2.  props校验传送数据

      props:{

        xx:Sting,

        xxx:Boolean

    }

        <script>
            const root = Vue.createApp({
                data(){
                    return{
                        content:'我是父组件 传送的动态数据'
                    }
                },
                template:`
                    <div> 
                        <component—childer :content='content'/>
                    </div>
                `
            })
            //定义 全局组件
            root.component('component—childer',{
                props:['content'],
                template:` <div>{{content}}</div> `
            })
            root.mount('#app')
        </script>
  • 相关阅读:
    我的DBDA类文件
    登录时的验证码怎么写?
    phpcms 制作简单企业站的常用标签
    HTML 基础知识
    目标
    split函数的实现
    myString操作符重载
    cout中的执行顺序_a++和++a
    二叉树的层次遍历法
    树的前中序遍历_求后续遍历
  • 原文地址:https://www.cnblogs.com/Hanro-Z/p/14584417.html
Copyright © 2020-2023  润新知