动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <site-info
        v-for="site in sites"
        :id="site.id"
        :title="site.title"
      ></site-info>
    </div>
    <script>
      const Site = {
        data() {
          return {
            sites: [
              { id: 1, title: 'Google' },
              { id: 2, title: 'Baidu' },
              { id: 3, title: 'Taobao' },
            ],
          }
        },
      }
 
      const app = Vue.createApp(Site)
 
      app.component('site-info', {
        props: ['id', 'title'],
 
        template: `<h4>{{id}} --- {{ title }}</h4>`,
      })
 
      app.mount('#app')
    </script>
  </body>
</html>

posted @ 2022-04-28 15:05 wjxuriel 阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 学习Vue的第二天

· 在组件上使用 v-for

· VUE v-bind 数据绑定

· Vue知识框架

· vue父组件向子组件传递一个对象，使用一个对象绑定多个 prop

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

Live2D

Talk is cheap,
show me your code!

昵称： wjxuriel
园龄： 2年10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

my-blog-site

Email： wjxuriel@petalmail.com

动态 Prop

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Vue 测试实例</title>
	<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
	<div id="app">
	<site-info
	v-for="site in sites"
	:id="site.id"
	:title="site.title"
	></site-info>
	</div>
	<script>
	const Site = {
	data() {
	return {
	sites: [
	{ id: 1, title: 'Google' },
	{ id: 2, title: 'Baidu' },
	{ id: 3, title: 'Taobao' },
	],
	}
	},
	}

	const app = Vue.createApp(Site)

	app.component('site-info', {
	props: ['id', 'title'],

	template: `<h4>{{id}} --- {{ title }}</h4>`,
	})

	app.mount('#app')
	</script>
	</body>
	</html>