vue父传子的使用

dingdang_666888

于 2019-04-03 15:16:26 发布

阅读量500

点赞数

文章标签： vue父传子 vue全局组件与局部组件

本文链接：https://blog.youkuaiyun.com/lixiaoyan_star/article/details/88996171

版权

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>