• vue父传子的使用


    vue父传子的使用

    vue父传子需要注意的几点,先分别声明局部组件,再声明入口文件,局部组件挂载到入口文件,入口文件挂载到vue实例上。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
            <title></title>
            <style>
              .head{height:80px;background:red;}
              .main{height:100px;background:blue;}
            </style>
    		<script src="node_modules/vue/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
                  <App/>
    		</div>
            <script type="text/javascript">
                //先声明后使用
               var Vheader={
                 template:`
                 <div class="head">头部</div>
                 `
               }
               var Vmain={
                 template:`
                 <div class="main">{{msg}}</div>
                 `,
                 props:["msg"]
               }
                 //声明入口文件
                var App={
                    template:`
                   <div>
                        <Vheader/>
                        <Vmain :msg="msg"/>
                   </div>
                    `,
                    data(){
                        return{
                            msg:'Vue.js'
                        }
                    },
                    components:{
                        Vheader,
                        Vmain
                    }
                }
    			new Vue({
    				el:"#app",
    				components:{
                        App
                    }
                   
    			})
    		</script>
    	</body>
    </html>
    
    
  • 相关阅读:
    第九周
    第七周.
    第六周.
    第二次作业
    第九周作业
    第八周作业
    第七周作业
    第六周作业
    第五周作业
    统计一行文本的单词个数
  • 原文地址:https://www.cnblogs.com/lxystar/p/10649046.html
Copyright © 2020-2023  润新知