标签：node -- age --- 19 组件 属性
组件其他
跟组件和组件 一些问题
new Vue() --->管理div ----》根组件
自己再定义的全局， 局部是组件
组件有自己的html，css，js ---》数据，事件。。。。。
在组件中，this代指当前组件
父子组件的data是无法分享的
data是1个函数，需要有返回值(return)
组件间通信之父传子
组件间数据不共享-----》需要进行数据传递
父传子 ：使用自定义属性方式
通过自定义属性--->不能用驼峰,不要跟子组件中变量冲突
'''
关键字 ： props
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue_day05/js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="app">
<h1>父子通信之父传子，通过自定义属性--->不能用驼峰,不要跟子组件中变量冲突</h1>
<!-- <h2>字符串的age–>age="age"</h2>-->
<!-- <child age="age"></child>-->
<!-- <h2>:age="19"</h2>-->
<!-- <child :age="19"></child>-->
<!-- <h2>age="19"</h2>-->
<!-- <child age="19"></child>-->
<h2>:age="age"</h2>
<child :age="age" myname="彭于晏"></child>
<h1>属性验证---》传入的必须是xx类型</h1>
<!-- <h2>字符串的age :age="age"</h2>-->
<!-- <child age="age"></child>-->
<!-- <h2>:age="19"</h2>-->
<!-- <child :age="19"></child>-->
<!-- <h2>age="19"</h2>-->
<!-- <child age="19"></child>-->
<!-- <h2>:age="age"</h2>-->
<!-- <child :age="age"></child>-->
</div>
</body>
<script>
// 父中有age 子child 只有name，没有age，现在把父中的age传到child中 显示
var child = {
template: `
<div>
<button>后退</button>
<span>
首页---名字:{{ myname }}---->年龄：{{ age }}
</span>
<button>前进</button>
</div>
`,
data() {
return {
myname: '彭于晏',
}
},
// props:['age'],
props: {age: Number, myname: String,},
}
var vm = new Vue({
el: '.app',
data: {
age: 19,
},
components: {
child
}
})
</script>
</html>
组件间通信之子传父
通过自定义事件
标签：node,
--,
age,
---,
19,
组件,
属性
From： https://www.cnblogs.com/xm15/p/17130457.html