作者：小晶晶妮妮宝贝 | 来源：互联网 | 2023-10-11 20:47
本文由编程笔记#小编为大家整理，主要介绍了单向数据流相关的知识，希望对你有一定的参考价值。在上一篇的父子组件中，我们知道，当我们使用动态props将父组件的数据传递到子组件的时
本文由编程笔记#小编为大家整理，主要介绍了单向数据流相关的知识，希望对你有一定的参考价值。
在上一篇的父子组件中，我们知道，当我们使用动态props将父组件的数据传递到子组件的时候，如果父组件的数据变化，子组件的数据会随之变化。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuetitle>
<script src="bower_components/vue/dist/vue.js">script>
head>
<body>
<div id="box">
<aaa>aaa>
div>
<template id="aaa">
<p @click="changeText">我是父组件p>
<bbb :c-mess="pmsg">bbb>
template>
<script>
var vm=new Vue({
el:‘#box‘,
data:{
a:‘aaa‘
},
components:{
‘aaa‘:{
data(){
return {
‘pmsg‘:‘动态props‘,
}
},
template:‘#aaa‘,
methods:{
changeText(){
this.pmsg = ‘数据流‘
}
},
components:{
‘bbb‘:{
props:[‘c-mess‘],
template: `
<div>
<div>我是子组件 --- {{cMess}}</div>
<div>
`,
}
}
}
}
});
script>
body>
html>
父组件数据变化时，子组件数据会相应变化；而子组件数据变化时，父组件数据不变
我们知道，子组件的值是通过emit主动发送到父组件的，需要事件驱动，如果子组件的数据发生改变时，没有事件驱动，父组件的数据并不能随之更新。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuetitle>
<script src="bower_components/vue/dist/vue.js">script>
head>
<body>
<div id="box">
<aaa>aaa>
div>
<template id="aaa">
<div>
<span>父组件数据span>
<input v-model="msg">
div>
<p>{{msg}}p>
<bbb :child-msg="msg">bbb>
template>
<script>
var vm=new Vue({
el:‘#box‘,
components:{
‘aaa‘:{
data(){
return {
‘msg‘:‘match‘
}
},
template:‘#aaa‘,
components:{
‘bbb‘:{
props:[‘childMsg‘],
template: `
<div>
<span>子组件数据</span>
<input v-model="childMsg">
</div>
<p>{{childMsg}}</p>
`,
}
}
}
}
});
script>
body>
html>
京公网安备 11010802041100号