<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
组件传值
因为每一个组件的data都是独立的 互相之间不能通讯
父组件向子组件传值
1 在子组件中写上props 在props中自定义名字
props: ['自定义名字']
2 在父组件中找到子组件标签 然后在子组件标签上 使用v-bind:自定义名字="父组件要发送的数据"
<子组件标签 :自定义名字="要发送的数据"></子组件标签>
3 在子组件中将自定义名字当做data使用
<元素标签>{{自定义名字}}</元素标签>
-->
<div id="app">
{{num}}
<child v-bind:msg="num" :str="str"></child>
</div>
</body>
<script src="vue.min.js"></script>
<script>
Vue.component('child', {
props: ['msg', 'str'],
template: `
<div class="child">child-{{msg}}--{{str}}</div>
`
})
new Vue({
el: "#app",
data: {
num: 100,
str: 'hello'
}
})
</script>
</html>vue父组件向子组件之间传值
最新推荐文章于 2024-10-02 15:18:09 发布
扫一扫
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
