组件的使用
1.组件的注册 与 父向子传值
<div id="app">
<one data1="这是传递给one的数据"></one>
<two :data2="msg"></two>
</div>
<script type="text/javascript">
//局部注册组件
var two = {
props:['data2'],
template:`
<div>组件two --- {{data2}}</div>
`
}
//全局注册组件
Vue.component('one',{
props:['data1'],
template:`
<div>组件one ---- {{data1}}</div>
`
})
new Vue({
el:'#app',
data:{
msg:'这是传递给two的数据'
},
components:{
two
}
})
</script>
2.子向父传值
注意事件名不能有大写，要写成@three-handle ，不能写成threeHandle
//子组件 定义事件
<three @three-handle="hanleinfo"></three>
------------------------------------------------------------------------------------------------------------------
var three = {
data() {
return {
threemsg:'这是子向父传值'
}
},
template:`
<div>
<div>组件three </div>
<button @click="toFather">传值</button>
</div>
`,
methods:{
toFather() {
//使用Vue中的$emit(子组件绑定的自定义方法，要传递的参数值)
this.$emit('three-handle',this.threemsg)
}
}
}
new Vue({
el:'#app',
data:{
msg:'这是传递给two的数据'
},
methods:{
//接收事件
hanleinfo(val) {
console.log(val)
}
},
components:{
two,
three
}
})
多组件嵌套通信 父向子孙传递
$attrs 包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外),通俗来说就是传递不被props接收的数据一致往下传递。
inheritAttrs 设置可以不用在根元素看见特性 例如 name="aaaa" 之类的
Vue.component('C',{
mounted() {
console.log(this)
},
inheritAttrs:false,
template:`
<div>
C组件 <p>$attrs: {{$attrs}}</p>
</div>
`
})
Vue.component('B',{
inheritAttrs:false,
template:`
<div>
B组件 <p>$attrs: {{$attrs}}</p>
<C v-bind="$attrs"></C>
</div>
`
})
Vue.component('A',{
inheritAttrs:false,
template:`
<div>
A组件 <p>$attrs: {{$attrs}}</p>
<hr/>
<B v-bind="$attrs"></B>
</div>
`
})
var App = {
data() {
return {
da:'父组件传来的值'
}
},
template:`
<div>
app父组件
<A :msg="da" msg2="2222"></A>
</div>
`
}
多组件嵌套 孙向祖先传递
Vue.component('C',{
mounted() {
console.log(this)
},
inheritAttrs:false,
template:`
<div>
C组件 <p>$attrs: {{$attrs}}</p>
<button @click="chuanzhi">传值</button>
</div>
`,
methods:{
chuanzhi() {
this.$emit('handleFather','我是c的数据')
}
}
})
Vue.component('B',{
inheritAttrs:false,
template:`
<div>
B组件 <p>$attrs: {{$attrs}}</p>
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
`
})
Vue.component('A',{
inheritAttrs:false,
template:`
<div>
A组件 <p>$attrs: {{$attrs}}</p>
<hr/>
<B v-bind="$attrs" v-on="$listeners"></B>
</div>
`
})
var App = {
data() {
return {
da:'父组件传来的值'
}
},
template:`
<div>
app父组件
<A :msg="da" msg2="2222" v-on:handleFather="handleFather"></A>
</div>
`,
methods:{
handleFather(val) {
console.log(val)
}
}
}
vue使用bus进行组件通信
Vue.component('borther1',{
template:`
<div @click="chuan">
我是brother1
</div>
`,
methods:{
chuan() {
bus.$emit('chuanzhi','aaaa')
}
}
})
Vue.component('borther2',{
data() {
return {
msg:''
}
},
template:`
<div>
我是brother2----{{msg}}
</div>
`,
mounted() {
bus.$on('chuanzhi',(val) => {
this.msg = val
})
}
})
var bus = new Vue()
new Vue({
el:"#app",
})
通过provide 和 inject 进行组件通信
<div id="app">
<child1></child1>
</div>
<script type="text/javascript">
//父组件通过provide来提供变量，子组件中通过inject来注入变量，
不论子组件有多深，只要调用inject就能获取，
不局限只能从props中获取，只要父组件中的生命周期存在
Vue.component('child1',{
template:`
<div>
父组件
<child2/>
</div>
`,
provide:{
msg:'aaaaaaa'
}
})
Vue.component('child2',{
template:`
<div>
子组件 -----{{msg}}
<child3 />
</div>
`,
inject:['msg']
})
Vue.component('child3',{
template:`
<div>子组件2 ---- {{msg}}</div>
`,
inject:['msg']
})
new Vue({
el:'#app'
})
</script>
$parent跟 $children 进行组件通信
Vue.component('child1',{
data() {
return {
msg:''
}
},
template:`
<div>
<p @click="chuanzhi">父组件--------{{msg}}</p>
<child2/>
</div>
`,
methods:{
chuanzhi() {
this.$children[0].message = '给子组件的值'
this.msg = this.msg
}
}
})
Vue.component('child2',{
data() {
return {
msg:''
}
},
template:`
<div>
<p @click="jieshou">子组件------{{msg}}</p>
</div>
`,
methods:{
jieshou() {
this.$parent.msg = '子组件传来的值'
this.msg = this.message
}
}
})
new Vue({
el:'#app',
})
filter的使用
1.局部过滤器
声明
filters: {
test(value) {
return value + 1
}
}
使用
{{10|test}}
2.全局过滤器
声明
//可以接收参数
Vue.filter('test',function(value,da) {
// 将数据反转
return da + value.split('').reserve().join('')
})
使用
//可以在过滤器中添加参数
{{hello | test('hhh')}}
watch的使用
data:{
str:'',
arr:[{name:'zs'}]
},
watch: {
//监听str的数据变化
str(new,old) {
console.log(new,old);
},
//监听复杂数据类型 Array Object
arr{
deep:true, //深度监听
handeler(new,old) {
console.log(new[0].name);
}
}
}
computed
/*
触发computed中的get和set方法
console.log(this.valye) //get方法
this.value = 'test' //set方法
计算属性默认只有getter
setter也可以
*/
computed: {
test() {
return this.value1
},
test2() {
get() {
return this.value
},
set(new) {
this.value = new
}
}
}
vue获取DOM对象
给标签上添加 ref="xxx"
通过this.refs.xxx 获取原生jsDOM对象
当给组件上添加ref属性时，this.refs.xxx 获取当前组件对象
vue $nextTick() 的用法
在DOM更新循环之后执行回调函数，在修改数据之后使用次方法
在回调中获取更新后的DOM
<div id="app">
<input type="text" v-show="isShow" ref='input' />
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
isShow:false
},
mounted() {
this.isShow = true
this.$nextTick(function(){
this.$refs.input.focus()
})
}
})
</script>
VueRouter的使用
1.引入vue-router (两个全局组件 router-link to属性 相当于 a标签 to 相当于href属性 router-view 匹配路由组件的出口)
2.创建实例化VueRouter对象
3.匹配路由规则
4.挂载到new Vue()实例化对象上
5.给vue实例化对象上挂载了两个对象 this.route (它就是配置路由信息的对象)
命名路由
绑定自定义的属性 :to="{name = '路由的名字'}"
path: '/user/:id'
:to="{name:'user',params:'{id:1}'}"
path:'/user'
:to="{name:'user',query:{userId:1}}"
嵌套路由
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/index">首页</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
var Login = {
template:`
<div>
我是登录页 <br/>
<router-link :to="{name:'tmp',params:{id:'front'}}">前台</router-link>
<router-link :to="{name:'tmp',params:{id:'back'}}">后台</router-link>
<router-view></router-view>
</div>
`
}
var Index = {
template:`
<div>我是首页</div>
`
}
var tmp = {
data() {
return {
msg:'前端'
}
},
template:`
<div>我是{{msg}}</div>
`,
watch:{
'$route'(to,from) {
if(to.params.id == 'front') {
this.msg = '前端'
}else {
this.msg = '后端'
}
}
}
}
var router = new VueRouter({
routes:[
{
path:'/login',
component:Login,
children:[
{
name:'tmp',
path:'/login/:id',
component:tmp
}
]
},
{
path:'/index',
component:Index
}
]
})
new Vue({
el:'#app',
data:{
msg:'前端'
},
router
})
</script>
keep-alive
保持组件的状态，使组件切换回来时继续保持离开前的状态
vue-router meta的使用
meta:{
auth:true
}
router.beforeEach(to,from.next) {
if(to.meta.auth) {
//未登录的功能
}
}