19-父组件向子组件传递数据---props机制
作者：互联网
1、父组件向子组件传递静态数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
使用组件：
props传递静态数据：就是写死一个数据
动态数据：数据可以改变
父组件向子组件传递数据：
a、传递静态数据 在组件使用标签上 声明静态数据 key=value 在组件定义内部使用props进行接收数据才行
-->
<div id="app">
<h1>{{msg}}</h1>
<login title="我是标题"></login>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const login = {
template:`<div><h3>用户登录-----{{title}}----{{loginTitle}}</h3></div>`,
data(){
return {
//title: "我是子组件内部标题" //会报错，因为props已有这个变量
loginTitle:this.title
}
},
props:['title'], //用来接收父组件给当前组件传递数据 注意：props机制接收数据就相当于在自己data中定义这样一个数据
}
const app = new Vue({
el: "#app",
data:{
msg: "组件之间数据传递",
},
components:{ //注册局部组件
login,
}
});
</script>
2、父组件向子组件传递动态数据
【将子组件的变量绑定父组件的变量，当父组件变量发生改变的时候，就会影响子组件的数据】
【但是子组件数据变化不会影响父组件的数据，因为vue设计的单项数据流传递，为了防止子组件数据改变而影响父组件的状态】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
向子组件传递动态数据： props机制
a、组件标签上声明key=value 组件内部使用props数组进行声明 对应接口key
-->
<div id="app">
<input type="text" v-model="name">
<login v-bind:name="name"></login>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const login = {
template: `<div><h3>用户登录----{{name}}</h3></div>`,
props: ['name'],
}
const app = new Vue({
el: "#app",
data: {
name:"我是vue实例管理数据"
},
methods:{},
components:{
login,
}
});
</script>
标签：向子,const,title,app,传递数据,props,组件,data 来源： https://www.cnblogs.com/morehair/p/15338935.html