<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7.2porps传递数据</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
1.基础传递<br>
<my-component message="来自父组件的数据"></my-component>
<!-- 在组件中，使用选项props来生命需要从父级接收的数据，props的值可以是两种，一种是数组，一种是对象。例如我们构造一个数组，接收一个来自父级的数据message，并渲染出来。 -->
<my-component warning-text="提示信息"></my-component>
<!-- 由于HTML特性不区分大小写，使用DOM模板的时候，驼峰命名的props名称要转为短横分割命名。例如props中是warningText，在DOM中是warning-text -->
2.动态数据传递<br>
<input type="text" v-model="parentMessage">
<my-component2 :message="parentMessage"></my-component2>
<!-- 这个时候v-model绑定了父级的数据parentMessage，当通过输入框修改值时，子组件接收到的props中的“message”也会实时响应，并更新组件模板 -->
3.传递数据的规范
<my-component3 message="[1,2,3]"></my-component3><!-- 输出7，字符串的长度。 -->
<my-component3 :message="[1,2,3]"></my-component3><!-- 输出3，数组的长度 -->
<!-- 如果传递数字、布尔值、数组、对象，而且不使用v-bind，传递的仅仅是字符串 -->
</div>
<script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
/*1.基础传递*/
Vue.component('my-component',{
props: ['message','warningText'],
template: "<div>{{ message }} {{ warningText }}</div>"
})
/*2.动态数据传递*/
Vue.component('my-component2',{
props: ['message'],
template: "<div>{{ message }}</div>"
})
/*3.传递数据的规范*/
Vue.component('my-component3',{
props: ['message'],
template: "<div>{{ message.length }}</div>"
})
var vm = new Vue({
el: "#app",
data: {
parentMessage: "输入框初始值"
}
})
</script>
</body>
</html>
网友评论