• 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>
  • 相关阅读:
    github.com/dotnet/orleans
    C#开源
    Windows Server 2016正式版14393英文版ISO镜像下载:_X64FRE_ZH-CN.ISO
    Windows Server 2016
    功能更新到 Windows 10 企业版, 版本 1607
    Load Audio or Vedio files
    Socket.Available 属性
    CaptureManagerSDK
    Net.Sockets
    Solid Edge如何制作装配体的剖视图
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14202589.html
Copyright © 2020-2023  润新知