五、父组件向子组件传值

最新推荐文章于 2021-12-23 15:00:01 发布

前端之家

最新推荐文章于 2021-12-23 15:00:01 发布

阅读量178

点赞数

分类专栏： VUEJS技术

本文链接：https://blog.csdn.net/qq_41761746/article/details/80241709

版权

VUEJS技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

//引入vue框架
import Vue from 'vue'
import App from './App'


new Vue({
	el:'#app',
	render: function (h){
		return h(App)
	}
})

父组件

<template>
  <div id="app">
    <HeaderDiv :logo = "logoMsg"></HeaderDiv>
  </div>
</template>
<script>
  import HeaderDiv from './components/a'
  export default{
    name :'#app',
    data(){
      return {
        logoMsg:"我是传过去的数据"
      }
    },
    components:{
      HeaderDiv:HeaderDiv
    }
  }
</script>

子组件

<template>
	<header class="header">
		<div class="logo">{{ logo }}</div>
		<ul class="nav">
			<li v-for="nav in navs">{{nav.li}}</li>
		</ul>
	</header>
</template>
<script>
	export default{
		name:'headerDiv',
		data(){
			return {
				navs:[
					{li:'日志'},
					{li:'小数'},
					{li:'想吃'},
				]
			}
		},
		props:['logo']
	}
</script>

前端之家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
五、父组件向子组件传值

HTML&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; &lt;title&a
复制链接

扫一扫