Vue框架之组件与过滤器的使用

一、组件的使用

局部组件的使用

打油诗: 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"
})

巴特西

Vue框架之组件与过滤器的使用

一、组件的使用

局部组件的使用

(1)父组件向子组件传递数据:通过Prop

(2)如何从子组件传递数据到父组件

全局组件的使用

二、过滤器的使用

局部过滤器

全局过滤器

动态路由匹配

编程式导航

最新文章

热门文章