vue基础(二):组件(props、$ref、$emit、、.native)

更新时间:2019-08-15 14:13:47点击次数:456次
prop 着重于数据传递,不能调用子组件里的属性和方法(父->子,传递数据给子组件)。
父组件先绑定自定义属性=要传递的数据,子组件声明props:[父组件的自定义属性名]接受数据

emit(event,arg)触发父组件的自定义事件event,将参数arg传递给父组件,父组件通过@event监听并接收参数。使用this. emit(event,arg) 触发父组件的自定义事件event,将参数arg传递给父组件,父组件通过@event监听并接收参数。使用 this.emit(event,arg)触发父组件的自定义事件event,将参数arg传递给父组件,父组件通过@event监听并接收参数。使用this. parent查找当前组件的父组件。
使用 this.$ children查找当前组件的直接子组件,可以遍历全部子组件, 需要注意 $children 并不保证顺序,也不是响应式的。
使用 this. $ root查找根组件,并可以配合 $ children遍历全部组件。
使用 this. $ refs查找命名子组件。

0、组件名
当使用 PascalCase (首字母大写命名) 定义一个组件时,引用时两种命名法都可以使用,也就是说 和 都是可接受的。注意,尽管如此,直接在 DOM 中使用时只有 kebab-case 是有效的。

1、父子组件(子组件:组件模板,父组件:使用页面)
//父组件

<template>
 <div>
 <h1>我是父组件!</h1>
 <child></child>
 </div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

//子组件

<template>
 <h3>我是子组件!</h3>
</template>
 
<script>
</script>

父组件通过import的方式导入子组件,并在components属性中注册,然后子组件就可以用标签的形式嵌进父组件了。

2、props(父->子,传递数据给子组件)
父组件先绑定自定义属性=要传递的数据,子组件声明props:[父组件的自定义属性名]接受数据
注意传递参数时要用—代替驼峰命名,HTML不区分大小写
父组件:

<template>
 <div>
 <h1>我是父组件!</h1>
 <child :my-message="message" mm="123"></child>
 </div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
data() {
return {
msg: '我是子组件三!'+ Math.random()
}
}
}
</script>

子组件:

<template>
 <h3>{{myMessage}}</h3>
</template>

<script>
 export default {
props: ['myMessage','mm']
  // // 方式二:指定数据类型与默认值
        // props: {
        //     myMessage: {
        //         type: Array,
        //         default: [5,6,7]  //指定默认的值
        //     }
        // }

</script>

3、ref(父->子,调用子组件的方法和属性)
ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。

父组件:

<template>
 <div>
 <h1>我是父组件!</h1>
 <child ref="msg"></child>
 </div>
</template>
 
<script>
 import Child from '../components/child.vue'
 export default {
components: {Child},
mounted: function () {
  //console.log( this.$refs.msg);
  this.$refs.msg.getMessage('我是子组件一!')
}
 }
</script>

子组件:

<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
data(){
  return{
  message:''
  }
},
methods:{
  getMessage(m){
  this.message=m;
  }
}
 }
</script>

通过ref=‘msg’将子组件child的实例指给$refs,并且通过.msg.getMessage()调用到子组件的getMessage方法,将参数传递给子组件。


prop和ref之间的区别:
prop 着重于数据传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用(如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通过$ref可能获取到该DOM 的属性集合,轻松访问到DOM元素,作用与JQ选择器类似。),这个功能比作为索引更常有用到。

4、$emit(事件,值) (子->父,向父组件传入事件名称来触发一个事件)
$emit 方法向父组件传入事件名称来触发一个事件,事件在父组件定义。
emit实现∗∗子组件向父组件通信∗∗。触发当前实例上的事件,附加参数都会传递给监听器回调:子组件this. emit 实现**子组件向父组件通信**。触发当前实例上的事件,附加参数都会传递给监听器回调:子组件this.emit实现∗∗子组件向父组件通信∗∗。触发当前实例上的事件,附加参数都会传递给监听器回调:子组件this.emit(evevt,arg),父组件@event=“XX” ,父组件methods:{XX(arg){}}。

vm.$emit( event, arg )

父组件:

<template>
 <div>
 <h1>{{title}}</h1>
 <child  @returnBack="returnBack"></child>
 </div>
</template>
 
<script>
 import Child from '../components/child.vue'
 export default {
components: {Child},
data(){
  return{
  title:''
  }
},
methods:{
returnBack() {
                //随便什么
            },
}
 }
</script>

子组件:

<template>
<div class="header">
    <a class="backBtn" @click="returnBack"><i class="icon-back"></i></a>
    <h3 class="pageTitle">子组件标题}</h3>
</div>
</template>
<script>
 export default {
methods: {
  returnBack(){
                this.$emit('returnBack')
            }
}
 }
</script>

5、父组件用绑定属性的方式把方法传入子组件中 在子组件里直接调用这个方法(子->父)
<template>
  <div class="parent">
    <child :fatherMethod='fatherMethod'></child>// 父组件把方法传入子组件中,在子组件里直接调用这个方法
  </div>
</template>

<script>
    import child from '../base/child'
    
    export default {
        methods:{
            fatherMethod() {
                alert('我是父组件的know方法');
            }
        },
        components:{
            child
        }
    }
</script>

<template>
  <div class="child" @click='childClick'>
  </div>
</template>

<script>

    export default {
        props:{
            fatherMethod: {
                type: Function,
                default: null
            }
        },
        methods:{
            childClick(){
                this.fatherMethod()
        }
        }
    }
</script>

6、通过 $parent直接 获取父组件数据和调用父组件方法(子->父)
<template>
  <div class="parent">
    <child></child>
  </div>
</template>

<script>
    import child from '../base/child'
    
    export default {
        data() { // 组件的data必须是函数
          return {
            msg:'父组件数据测试'
          }
        },
        methods:{
          fatherMethod() {
            alert('我是父组件的方法')
          }
        },
        components:{
            child
        }
    }
</script>

<template>
  <div class="child" @click='childClick'>
  </div>
</template>

<script>

    export default {
        data() {
            return {  }
        },
        methods:{
            childClick(){
                this.$parent.fatherMethod()
                console.log(this.$parent.msg)
        }
        }
    }
</script>

7、< solt >插槽,承载分发内容的出口
Vue.component('Vbtn',{ template:'<div><button><solt></solt></button></div>'});
1
var  Vcontent={ 
template:'<div><Vbtn>删除</Vbtn></div>'
}
var Vheader={
template:'<div><Vbtn>播放</Vbtn></div>'
}

8、.native获取子组件的原生事件
var Vcontent={ 
template:'<div><Vbtn @click.native='add'>删除</Vbtn></div>' ,
methods:{
add(){
alert(1);
}
}
}

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息