在Vue中将父组件数据传递给子组件
<body>
<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
</body>
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello",
movies: ["海王", "海贼王", "海绵宝宝"]
},
components: {
'cpn': {
template: "#cpn",
props: ['cmovies', 'cmessage']
}
}
})
</script>
</html>
Vue中父传子主要是通过props在子组件中建立变量,而后通过v-bind属性将父组件中变量的值的数据传递给子组件中通过props建立的变量,而后在子组件中使用相应的变量即可。