[JavaScript知识库]vue组件

vue全局组件

<div?id="box">

<first></first>

</div>

????<script?src="./vue.js"></script>

????<script> //第一种注册定义组件的方式

Vue.component('first',{? ? ? ? ? ? ? ? ? ? ? ? ?//Vue.component用来注册组件，里面两个参数，第一个是? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?组件名，第二个是组件内容

????template:'<h1>看那东南西北风</h1>'

})

????????new?Vue({

????????????el:'#box',

????????})

????</script>

<script> //第二种注册定义组件的方式，用法跟第一种一样

let secondss={

?template:'<h1>看那东南西北风</h1>'

}

Vue.component('first',? secondss? ? //Vue.component用来注册组件，里面两个参数，第一个是组件名，第二个是组件内容)

????????new?Vue({

????????????el:'#box',

????????})

????</script>

局部组件，只能在本vue实例中使用

<div?id="box1">

???<se-condchild></se-condchild>

</div>

<script?src="./vue.js"></script>

????<script>? ?//第一种方式

new?Vue({

????????????el:'#box1',

????????????components:{? ? ? //注册局部组件，里面的是内容

????????????????'secondChild':{? ? //引号里面是组件名

?????????????template:'<h2>吹啊吹啊我的骄傲放纵</h2>'

????????????????}

????????????}

????????})

????</script>

?<script>? ?//第二种方式,用法跟第一种一样

let secondjubu={? //定义组件

??template:'<h2>吹啊吹啊我的骄傲放纵</h2>'

}

new?Vue({

????????????el:'#box1',

????????????components:{? ? ? //注册局部组件，里面的是内容

????????????????'secondChild':?secondjubu? ? ? ? ?//引号里面是组件名,这一步是注册组件,引号可以写也可以不写

????????????}

????????})

????</script>

vue组件中is的用法

????<div?id="box">

<component?is='fir'></component>? ?//使用component标签来写,里面有个属性值为is,is等于哪个组件名,component就显示哪个组件

????</div>

????<script?src="./vue.js"></script>

????<script>

????????let?fisdt={

????????????template:'<h1>我是666666666</h1>'

????????}

????????new?Vue({

????????????el:'#box',

???????????components:{

???????????????fir:fisdt,

???????????}

????????})

????</script>

模板组件,如果需要的内容比较多,在以上组件里面不好操作,所以就有了模板组件

????<div?id="box">

<jubu></jubu>

????</div>

????<template?id="moban2"> //把template作为标签使用 ?来声明模板组件,一定要有id名

????????<div>? //模板组件里面一定要有一个根标签,不然会报错

????????<h1>111111</h1>

????????<h2>222222</h2>

????????<h3>333333</h3>

????????<h4>444444</h4>

????????<h5>555555</h5>

????????</div>??

????</template>

????<script?src="./vue.js"></script>

????<script>

let?sec={

????template:'#moban2'? //绑定的是声明的模板组件的id名

}

????????new?Vue({

????????????el:'#box',

??????????components:{

??????????????'jubu':sec

??????????}

????????})

????</script>

</body>

</html>

动态组件,用一个案例来说明

????<div?id="box">

????????<input?type="button"?value="首页"?@click='aindex'>? //点击这个按钮显示首页内容

????????<input?type="button"?value="新闻"?@click='anews'>??//点击这个按钮显示新闻页面内容

????????<input?type="button"?value="关于我们"?@click='aabout'>??//点击这个按钮关于我们页面内容

????????<component?:is="value"></component>? //控制显示的内容,因为是动态的所以绑定is属性

????</div>

????<template?id="kuai1">

????????<div>

????????????<h1>我是首页</h1>

????????</div>

????</template>

????<template?id="kuai2">

????????<div>

????????????<h1>我是新闻</h1>

????????</div>

????</template>

????<template?id="kuai3">

????????<div>

????????????<h1>我是关于</h1>

????????</div>

????</template>

????<script?src="./vue.js"></script>

????<script>

????????let?index?=?{

????????????template:?'#kuai1'

????????}

????????let?news?=?{

????????????template:?'#kuai2'

????????}

????????let?about?=?{

????????????template:?'#kuai3'

????????}

????????new?Vue({

????????????el:'#box',

????????????data:{

?????????????value:'index'

????????????},

??????????components:{

??????????????index,? ?//注册局部组件

??????????????news,? ??//注册局部组件

??????????????about? ? ?//注册局部组件

??????????},

??????????methods:{

??????????????aindex(){

????????????this.value='index'? ? //点击哪个按钮就把is属性的值改为特定的值,实现显示不同内容

??????????????},

??????????????anews(){

????????????????this.value='news'

??????????????},

??????????????aabout(){

????????????????this.value='about'

??????????????}

??????????}

????????})

????</script>

组件中的data数据

? <div id="box">
? ? <my-first></my-first>
? </div>
? <template id="first">
? ? <div>
? ? ? ?<h1>我是第一个组件</h1>
? ? ? ?<h2>{{msg}}</h2>
? ? ? ?<button @click='changeMsg'>改变msg</button>
? ? </div>
? </template>
<script src="./vue.js"></script>
<script>
? // 组件在创建时和vue实例创建时非常相似都有data、methods、computed....这些选项,在vue实例中可以用什么方法属性在组件实例中就可以用,唯一不一样的就是组件中的data必须是函数,函数必须要有return值,return值必须是个对象 对象面存放的是当前组件所用到的数据
? let first = {
? ? template:"#first",
? ? // 组件中的data数据具有私密性，只能为当前组件提供使用,data 必须为函数,里面的数据需要以返回值的形式发送
? ? // data 必须为函数原因：每个函数单独返回一个实例化对象,让组件使用，每个组件的数据都是唯一的，为了其他组件修改data值不会影响本组件的值；
? ? data(){
? ? ? return {
? ? ? ? msg:"我是第一个组件里面的数据",
? ? ? ? name:"周小强"
? ? ? }
? ? },
? ? methods: {
? ? ? changeMsg(){
? ? ? ? ?console.log(this)? ? ? ? ? ?// this指向当前组件实例
? ? ? }
? ? },
? };
? ?Vue.component("myFirst",first);

? ? ?new Vue({
? ? ? ? el:"#box"
? ? ? })
</script>

父组件向子组件传值，传递过去的值相当于添加给了子组件data里面

?1.在父组件中给子组件绑定一个自定义属性
?2.在子组件中使用props来接收自定义属性

<div?id="box">

<child?:names='msg'?:user='user'></child>? //自定义属性等于的值就是先要用的父组件里面的数据名

</div>

<template?id="child">

????<div>

????????<h1>我的名字是{{names}}我的名字是{{user.name}}</h1>? //在字组件里面使用父组件的值,这个时候用的是自定义的属性名

????</div>

</template>????

????<script?src="./vue.js"></script>

????<script>

?????const?Feature?=?{

?????????template:'#child',

?????????props:{? ? ?//当props为数组时，表示可以接收任意数据类型的自定义属性,为数组时的写法为props:[自定义属性名,自定义属性名],当props为对象时表示需要对接收的自定义属性进行验证数据类型

?????????????names:String,? ?// 属性名:类型

?????????????user:{

?????????????????type:[Object,String,Object]? ?//不确定传递过来的数据类型时可以写一个名为type的数组,把可能的数据类型都写里面

? ? ? ? default:function(){
? ? ? ? ? ? ? return "吃鸡"
? ? ? ? ? ? }? //假如父组件里面没有user就把这个默认值吃鸡传递过去了

?????????????},

????????????},

?????};

?????Vue.component('child',Feature)? //注册全局组件

????????new?Vue({

????????????el:'#box',

????????????data:{

????????????????msg:'张三',

????????????????user:{

????????????????????name:'范冰冰'

????????????????}

????????????}

????????})

????</script>

子组件向父组件传值

1.在父组件中的子组件上绑定自定义事件 ,必须用@
2.在子组件中使用this.$emit将自定事件发送给父组件
3.在父组件methods对象中接收子组件自定义事件-->

????<div?id="dad">

????????{{name}}??

????????<child?@sonchuan='sonval'></child>? //绑定自定义事件

????</div>

????<template?id="child">

????????<div>

????????????<h1>sonsonson</h1>

????????</div>

????</template>

<script?src="./vue.js"></script>

<script>

????let?child?=?{

????????template:?'#child',

????????data()?{

????????????return?{

????????????????name:?'张三',

????????????????age:?17,

????????????}

????????},

????????mounted()?{

????????????this.$emit('sonchuan',?this.name);? ? // 使用this.$emit将自定义事件发送给父组件 参数一自定义事件名称 参数二将要传递的数据（可以是任意数据类型）

????????}

????}

????Vue.component('child',?child)

new?Vue({

????????el:?'#dad',

????????data:?{

????????????name:?'',

????????????age:?null

????????},

????????methods:?{

????????????sonval(value)?{? ?//父组件用自定义事件后的函数名接收,参数就是子组件传递过来的值

????????????????this.name?=?value

????????????}

????????}

????});

</script>

如果子组件向父组件传递数据类型是对象
? <div id="app">
? ? ? <h3 @getlike = 'getuser'>我叫{{user.name}}是个{{user.sex}}喜欢{{user.like}}</h3>
? </div>

? ? <template id="child">
? ? ? ? <div>
? ? ? ? ? ? <h1>
? ? ? ? ? 我是一个子组件{{msg}}
? ? ? ? </h1>
? ? ? ? </div>
? ? </template>
<script src="./vue.js"></script>
<script>

? ? ? let child = {
? ? ? ? template:"#child",
? ? ? ? data() {
? ? ? ? ? return {
? ? ? ? ? ? user:{
? ? ? ? ? ? ? name:"小明",
? ? ? ? ? ? ? sex:"男",
? ? ? ? ? ? ? like:"女"
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ?this.$emit("getlike",this.user);
? ? ? ? }
? ? ? }

? ? ? Vue.component("child",child)

? ? ? new Vue({
? ? ? ? el:"#app",
? ? ? ? data:{
? ? ? ? ? user:{
? ? ? ? ? ? name:"",
? ? ? ? ? ? sex:"",
? ? ? ? ? ? like:""
? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? getuser(value){
? ? ? ? ? ? this.user = value
? ? ? ? ? }
? ? ? ? },
? ? ? })

</script>
</html>