组件之间的通信_props
component 组件实例作用域 是孤立的。这意味着不能(不应该)在组件模板类直接使用,
只能通过 props 方法传递 属性
组件通信 props子组件 使用 父组件 数据 (单向)可以理解为 只读 不可写入
- 子组件 props:[ 定义数据名称1 ]
- 父组件定义 父组件数据值1
- <com v-bind:定义数据名称1="父组件数据值1"></com> //实际使用
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<com :message="nameparent"></com>
<com v-bind:message="nameparent"></com>
<p></p>
<show v-bind:msg="nameparent"></show>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
nameparent:"张大类 他 爹",
message:""
},
methods: {
},
computed: {
},
components: {
//子组件
com: {
props:["message"],
data: function() {
return {
name: "张大雷",
age: 18
}
},
template: "<h1>局部组件 & 子组件 data: {{name}} {{message}}</h1>",
},
show:{
props:["msg"],
data:function(){
return{
nameshow:"张二雷",
}
},
template:"<h1>第二个 子组件: {{msg}}</h1>"
}
}
})
</script>
</body>
</html>