父组件向子组件传递数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<style type="text/css">
#app {
background: lightblue;
width: 100%;
height: 400px;
}
#c1 {
background: lightgreen;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<h2>根实例</h2>
<!-- 输入框中输入的数据会自动保存到变量rootMsg中 -->
<input v-model="rootMsg">
<!-- 在父组件的模板中调用子组件C1 -->
<C1 v-bind:fromroot="rootMsg"></C1>
</div>
<template id="tmp">
<div id="c1">
<h2>C1组件</h2>
<p>从根实例传递过来的数据是：{{fromroot}}</p>
</div>
</template>
<script>
// 创建C1组件
var C1 = {
template: '#tmp',
// 定义一个props参数fromRoot，用于接收父组件传递过来的数据
props: ['fromroot']
}
// 创建根实例
var vm = new Vue({
el: '#app',
data: {
rootMsg: 456
},
// 局部注册组件C1，通过注册可以确定组件之间的父子关系
// 例如在组件A中注册了组件B，那么A就是B的父亲，B就是A的儿子
components: {
C1
}
})
</script>
</body>
</html>
扫一扫
2393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
