视图改变是有数据改变的。是有后端数据驱动前段视图的变化。
十五、Props父组件向子组件传值 单组件由三部分组成： <template> <div> </div> </template> <script> export default { name: 'mc', data() { return { } } } </script> <style scoped> </style>template: 里面只能存在一个根元素
script：必须通过export default导出，外部组件才能访问。
name:指定组件名字。
data：绑定数据。
style：样式
scoped：当前样式只在当前组件内生效，局部的。
子父级组件一个组件被另一个组件嵌套。
如： app组件里面嵌套hellowolrd组件。
子父级组件通信父 --> 子： props
子 --> 父： emit Event
父向子通信：
父组件： <son :title="msg"></son> msg: 'son hello' 子组件： props: [ "title" ] {{title}} props数据传递类型验证 子组件接受参数时，指定类型。 props: { title: { type: [String,Number], required: true， defalut: 100 } }type:指定接收参数类型，可以有多个类型。
required：是否必传。
注意：如果是Number、String可以直接默认一个值，如果是其他类型则默认返回一个方法。
<son :msg="say"></son> return { say: { name:"Zhangsan", age:20 } } props: { msg: { type:Object, default:function(){ return { name:"lisi", age:10 } } } }数据验证
多数据类型验证
必选项验证
默认值
obj、arr数据类型的默认值
十六、子向父组件通信使用v-on自定义事件
子组件代码： <template> <div> <button @click="send">发送</button> </div> </template> <script> export default { name: 'OneSon', data() { return { msg: '父组件，您好。' } }, methods: { send() { this.$emit("msg",this.msg); } } } </script> <style> </style> 父组件代码： <template> <div> <one-son @msg="getData"></one-son> <H1>{{msg}}</H1> </div> </template> <script> import OneSon from '../components/OneSon' export default { name: 'One', components:{ OneSon }, data() { return { msg: '' } }, methods: { getData(data) { this.msg = data; } } } </script> <style> </style> 父组件向子组件传递数据步骤子组件通过一个事件来触发。
事件中有两个参数，一个key，用来在父组件中作为事件。另一个数据。
父组件使用key作为事件，定义一个事件接受数据
数据交互式同步的。
input所有内容为String，可以通过下面进行转换成数字。 <one-son @msg="getData" :sendMsg="getNum"></one-son> computed: { getNum(){ return this.newMsg -0; } } 十七、插槽与缓存 使用插槽分发内容
单个插槽
父组件： <template> <div> <two-son> <span>{{msg}}</span> </two-son> </div> </template> <script> import TwoSon from '../components/TwoSon' export default { name: 'Two', components: { TwoSon }, data() { return { msg: '使用插槽' } } } </script> <style scoped> span{ color: red; font-size: 40px; } </style> 子组件： <template> <div> <slot>我是插槽，但是我会被父组件插入内容覆盖。</slot> </div> </template> <script> export default { name: 'TwoSon', data() { return { } } } </script> <style> </style>注意：插槽的样式，可以在父组件中设置，也可以在子组件中设置。
具名插槽
<two-son> <span slot="s1">{{msg}}</span> <p slot="s2">我是插槽2哦</p> </two-son> <div> <slot>我是插槽，但是我会被父组件插入内容覆盖。</slot> <hr> <slot></slot> </div>注意：当没有传递视图时，可以显示查查默认设置的值。
作用域插槽（传递参数）
作用于插槽传递数据 子组件： <slot text="google hjhlj"></slot> 父组件： <span slot="s2" slot-scope="key"> {{ key.text}} </span> props与slot插槽对比 名称 props slot传递数据 父组件 ---> 子组件 子组件---> 父组件
数据 由父组件决定 由子组件决定
视图 由子组件决定 由父组件决定
十八、动态组件 <template> <div> <component v-bind:is="currentView"></component> <button @click="change">change</button> </div> </template> <script> import Events from './components/Events' import FormData from './components/FormData' import Styles from './components/Style' import MyCompent from './components/myCompent' import Father from './components/Father' import One from './components/One' import Two from './components/Two' export default { name: 'App', data() { return { currentView: "FormData" } }, methods: { change() { this.currentView = 'MyCompent'; } }, components: { Events, FormData, Styles, MyCompent, Father, One, Two } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>