• 03 组件通信父传子


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <!--3.使用子组件-->
        <App></App>
    </div>
    <script src="./vue.js"></script>
    <script>
        //全局组件
        //父传子:通过props来进行通信
        //1.在子组件中声明props接受父组件挂载子组件中的属性 props:['childData']
        //2.可以在子组件的template中任意使用 <h4>{{childData}}</h4>
        //3.在父组件绑定自定义的属性  <child :childData = 'msg'></child>  注意要再子组件标签中
        Vue.component('child',{
            template: `<div>
                            <h3>我是一个子组件</h3>
                            <h4>{{childData}}</h4>
                       </div>>`,
            props:['childData']
        })

        const App = {
            data(){
                return {
                    msg:'我是父组件传进来的值'
                }
            },
            template:`
                    <div>
                         <child :childData = 'msg'></child>
                    </div>`,

        }

        new Vue({
            el:'#app',
            data:{

            },
            components:{
                //2.挂载子组件
                App
            }
        })

    </script>
    </body>
    </html>
  • 相关阅读:
    B-Tree和B+Tree的区别
    b树和hash树的应用场景
    比较顺序表和链表的优缺点,说说它们分别在什么场景下使用?
    5V与3.3V电平互转
    100M双绞线接头的标准接法
    解决openwrt中文界面异常
    刚刚开通了博客
    openwrt挂载摄像头及视频保存
    mwan3多wan叠加成功
    贝尔金(Belkin)7231-4P tftp救砖
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14202589.html
Copyright © 2020-2023  润新知