一、组件的使用 局部组件的使用
打油诗: 1.声子 2.挂子 3.用
var App = { tempalte:` <div class=\'app\'></div>` }; //2.挂子 new Vue({ el:"#app", //用子 template:<App /> components:{ App } }) (1)父组件向子组件传递数据:通过Prop 1.在子组件自定义特性。props:[\'自定义的属性1\',\'自定义属性2\'] 当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样 2.要在父组件中导入的子组件内部 绑定自定义的属性 <Vheader :title = \'父组件中data声明的数据属性\'/> 注意:一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
(2)如何从子组件传递数据到父组件 1.给子组件中的某个按钮绑定原声事件,。我们可以调用内建的 this.$emit(\'自定义的事件名\',\'传递的数据\')，来向父级组件触发一个自定义的事件. 2.在父组件中的子组件标签中 要绑定自定义的事件, 全局组件的使用 Vue.component(\'全局组件的名字\',{ 跟new Vue() 实例化对象中的options是一样，但是要注意： 不管是公共组件还是局部组件 data必须是个函数 函数一定要返回 {} }) <slot> 元素作为承载分发内容的出口 二、过滤器的使用 局部过滤器 //1.注册局部过滤器 在组件对象中定义 filters:{ \'过滤器的名字\':function(value){ } } //2.使用过滤器 使用管道符 | {{price | \'过滤器的名字\'}} 全局过滤器 // 注册全局的过滤器 //第一个参数是过滤器的名字，第二个参数是执行的操作 Vue.filter(\'reverse\',function(value) { return value.split(\'\').reverse().join(\'\'); }); //使用跟 局部过滤器一样动态路由匹配
/user/1 /user/2 加载的是同一个组件
routes:[{
path:\'/\',
redirect:\'/home\'
},
{
path:\'/user/:xxxx\',
name:\'User\',
component:User
}
] <router-link :to = \'{name:"User",params:{xxxx:"front"}}\'>前端</router-link>
<router-link :to = \'{name:"User",params:{xxxx:"ios"}}\'>IOS</router-link>
复用的组件 监听路由的变化
watch: {\'$route\':(to,from)=>{
to 要进入的页面的路由信息对象
from 从哪个路由信息对象中来
}
} 编程式导航 this.$router.push({
name:"Home"
})