>

Vue和微信小程序的区别,vue父子组件间传值

- 编辑:至尊游戏网站 -

Vue和微信小程序的区别,vue父子组件间传值

Vue和Wechat小程序的分歧、相比

2018/08/04 · 基本功手艺 · Vue, 小程序

原来的小说出处: 卖女孩的小火柴   

写了vue项目和小程序,发掘两个有那多少个雷同之处,在这里想总括一下两岸的协作点和区分。

vue init webpack-simple template

风度翩翩、生命周期

先贴两张图:

cd template

vue生命周期

图片 1

npm i

小程序生命周期

图片 2

相比,小程序的钩函数要简明得多。

vue的钩子函数在跳转新页面时,钩子函数都会接触,但是小程序的钩子函数,页面不相同的跳转格局,触发的钩并不相同等。

  • onLoad: 页面加载
    二个页面只会调用一回,能够在 onLoad 中获得打开当前页面所调用的 query 参数。
  • onShow: 页面呈现
    历次展开页面都会调用三遍。
  • onReady: 页面初次渲染完结
    二个页面只会调用一遍,代表页面已经思虑安妥,能够和视图层进行相互影响。
    对界面包车型地铁设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
  • onHide: 页面隐蔽
    navigateTo或尾部tab切换时调用。
  • onUnload: 页面卸载
    redirectTonavigateBack的时候调用。

npm run dev

多少央求

在页面加载央浼数据时,两个钩子的应用有些接近,vue诚如会在created或者mounted中倡议数据,而在小程序,会在onLoad或者onShow中号令数据。

生龙活虎、子组件访谈父组件的数目

二、数据绑定

VUE:vue动态绑定三个变量的值为要素的某部属性的时候,会在变量后面加上冒号:,例:

<img :src="imgSrc"/>

1
<img :src="imgSrc"/>

小程序:绑定某些变量的值为因素属性时,会用七个大括号括起来,如若不加括号,为被以为是字符串。例:

<image src="{{imgSrc}}"></image>

1
<image src="{{imgSrc}}"></image>

 

格局大器晚成 :子组件直接待上访谈父组件的数额

三、列表渲染

一直贴代码,两个照旧多少相近
vue:

JavaScript

<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
 
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

小程序:

JavaScript

Page({ data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) <text wx:for="{{items}}">{{item}}</text>

1
2
3
4
5
6
7
8
9
10
Page({
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
 
<text wx:for="{{items}}">{{item}}</text>

 

父组件在调用子组件时,绑定想要获取的父组件中的数据

四、彰显与隐蔽元素

vue中,使用v-ifv-show调控作而成分的体现和潜伏

小程序中,使用wx-ifhidden决定成分的显得和隐形

 

在子组件内部,使用 props 选项注明获得的数目,即采取来自父组件中的数据

五、事件管理

vue:使用v-on:event绑定事件,或然选拔@event绑定事件,比方:

<button v-on:click="counter += 1">Add 1</button> <button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡

1
2
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡

小程序中,全用bindtap(bind+event),或者catchtap(catch+event)绑定事件,举例:

<button bindtap="noWork">后天不上班</button> <button catchtap="noWork">明日不上班</button> //阻止事件冒泡

1
2
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button>  //阻止事件冒泡

 

创办如下目录

六、数据双向绑定

图片 3

1.设置值

vue中,只需求再表单要素上增多v-model,然后再绑定data中对应的贰个值,当表单成分内容发生变化时,data中对应的值也会相应改换,那是vue非常nice的一点。

JavaScript

<div id="app"> <input v-model="reason" placeholder="填写理由" class='reason'/> </div> new Vue({ el: '#app', data: { reason:'' } })

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <input v-model="reason" placeholder="填写理由" class='reason'/>
</div>
 
new Vue({
  el: '#app',
  data: {
   reason:''
  }
})

但是在小程序中,却从没这一个效应。那怎么办吧?

当表单内容产生变化时,会触发布单成分上绑定的方法,然后在该方法中,通过this.setData({key:value})来将表单上的值赋值给data中的对应值。

上边是代码,能够体会一下:

JavaScript

<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" /> Page({ data:{ reason:'' }, bindReason(e卡塔尔 { this.setData({ reason: e.detail.value }卡塔尔(قطر‎ } }卡塔尔

1
2
3
4
5
6
7
8
9
10
11
12
<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" />
 
Page({
data:{
    reason:''
},
bindReason(e) {
    this.setData({
      reason: e.detail.value
    })
  }
})

当页面表单元素超多的时候,改进值正是风姿浪漫件体力活了。和小程序一比较,vuev-model简爽快的不用不要的。

App.vue 中写入

2.取值

vue中,通过this.reason取值

小程序中,通过this.data.reason取值

图片 4

 

<template>

七、绑定事件传参

vue中,绑定事件传参挺轻松,只必要在接触事件的章程中,把供给传递的数码作为形参传入就能够了,举个例子:

JavaScript

<button @click="say('几日前不上班'卡塔尔(قطر‎"></button> new Vue({ el: '#app', methods:{ say(arg){ consloe.log(arg) } } })

1
2
3
4
5
6
7
8
9
10
<button @click="say('明天不上班')"></button>
 
new Vue({
  el: '#app',
  methods:{
    say(arg){
    consloe.log(arg)
    }
  }
})

小程序中,不可能直接在绑定事件的诀窍中盛传参数,须求将参数作为属性值,绑定到成分上的data-特性上,然后在点子中,通过e.currentTarget.dataset.*的法子赢得,进而实现参数的传递,很费劲有未有…

JavaScript

<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view> Page({ data:{ reason:'' }, toApprove(e) { let id = e.currentTarget.dataset.id; } })

1
2
3
4
5
6
7
8
9
<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
    reason:''
},
toApprove(e) {
    let id = e.currentTarget.dataset.id;
  }
})

图片 5

 

    <div class="hello">

八、父子组件通讯

        <h3>我是 App 父组件</h3>

1.子零器件的利用

vue中,需要:

  1. 编写子组件
  2. 在急需运用的父组件中通过import引入
  3. vuecomponents中注册
  4. 在模板中使用

 

//子组件 bar.vue <template> <div class="search-box"> <div @click="say" :title="title" class="icon-dismiss"></div> </div> </template> <script> export default{ props:{ title:{ type:String, default:'' } } }, methods:{ say(卡塔尔国{ console.log('几眼下不上班'卡塔尔国; this.$emit('helloWorld'卡塔尔(قطر‎ } } </script> // 父组件 foo.vue <template> <div class="container"> <bar :title="title" @helloWorld="helloWorld"></bar> </div> </template> <script> import Bar from './bar.vue' export default{ data:{ title:"笔者是标题" }, methods:{ helloWorld(卡塔尔(قطر‎{ console.log('笔者收到到子组件传递的风浪了'卡塔尔国 } }, components:{ Bar } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
},
methods:{
    say(){
       console.log('明天不上班');
       this.$emit('helloWorld')
    }
}
</script>
 
// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>
 
<script>
import Bar from './bar.vue'
export default{
data:{
    title:"我是标题"
},
methods:{
    helloWorld(){
        console.log('我接收到子组件传递的事件了')
    }
},
components:{
    Bar
}
</script>

小程序中,需要:

  1. 编写子组件
  2. 在子组件的json文件中,将该公文宣称为组件
{ "component": true }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146bfc908165305-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146bfc908165305-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146bfc908165305-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146bfc908165305-1" class="crayon-line">
{
</div>
<div id="crayon-5b8f6a1146bfc908165305-2" class="crayon-line crayon-striped-line">
  &quot;component&quot;: true
</div>
<div id="crayon-5b8f6a1146bfc908165305-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在急需引进的父组件的json文件中,在usingComponents填写引进组件的机件名以至路径
"usingComponents": { "tab-bar": "../../components/tabBar/tabBar" }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146bff494634246-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146bff494634246-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146bff494634246-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146bff494634246-1" class="crayon-line">
&quot;usingComponents&quot;: {
</div>
<div id="crayon-5b8f6a1146bff494634246-2" class="crayon-line crayon-striped-line">
    &quot;tab-bar&quot;: &quot;../../components/tabBar/tabBar&quot;
</div>
<div id="crayon-5b8f6a1146bff494634246-3" class="crayon-line">
  }
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在父组件中,间接引进就可以
&lt;tab-bar currentpage="index"&gt;&lt;/tab-bar&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146c02109159426-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146c02109159426-1" class="crayon-line">
&lt;tab-bar currentpage=&quot;index&quot;&gt;&lt;/tab-bar&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


具体代码:  


// 子组件 &lt;!--components/tabBar/tabBar.wxml--&gt; &lt;view
class='tabbar-wrapper'&gt; &lt;view class='left-bar
{{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'&gt;
&lt;text class='iconfont icon-shouye'&gt;&lt;/text&gt;
&lt;view&gt;首页&lt;/view&gt; &lt;/view&gt; &lt;view
class='right-bar {{currentpage==="setting"?"active":""}}'
bindtap='jumpToSetting'&gt; &lt;text class='iconfont
icon-shezhi'&gt;&lt;/text&gt; &lt;view&gt;设置&lt;/view&gt;
&lt;/view&gt; &lt;/view&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-12">
12
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146c06935082908-1" class="crayon-line">
// 子组件
</div>
<div id="crayon-5b8f6a1146c06935082908-2" class="crayon-line crayon-striped-line">
&lt;!--components/tabBar/tabBar.wxml--&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-3" class="crayon-line">
&lt;view class='tabbar-wrapper'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-4" class="crayon-line crayon-striped-line">
  &lt;view class='left-bar {{currentpage===&quot;index&quot;?&quot;active&quot;:&quot;&quot;}}' bindtap='jumpToIndex'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-5" class="crayon-line">
    &lt;text class='iconfont icon-shouye'&gt;&lt;/text&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-6" class="crayon-line crayon-striped-line">
    &lt;view&gt;首页&lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-7" class="crayon-line">
  &lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-8" class="crayon-line crayon-striped-line">
  &lt;view class='right-bar {{currentpage===&quot;setting&quot;?&quot;active&quot;:&quot;&quot;}}' bindtap='jumpToSetting'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-9" class="crayon-line">
    &lt;text class='iconfont icon-shezhi'&gt;&lt;/text&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-10" class="crayon-line crayon-striped-line">
    &lt;view&gt;设置&lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-11" class="crayon-line">
  &lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-12" class="crayon-line crayon-striped-line">
&lt;/view&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

        <h4>访问本人的数额:{{msg}},{{name}},{{user.id}}</h4>

2.老爹和儿子组件间通讯

        <hr>

vue

父组件向子组件传递数据,只供给在子组件通过v-bind盛传一个值,在子组件中,通过props收到,就可以形成数据的传递,示例:

// 父组件 foo.vue <template> <div class="container"> <bar :title="title"></bar> </div> </template> <script> import Bar from './bar.vue' export default{ data:{ title:"笔者是标题" }, components:{ Bar } </script> // 子组件bar.vue <template> <div class="search-box"> <div :title="title" ></div> </div> </template> <script> export default{ props:{ title:{ type:String, default:'' } } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title"></bar>
  </div>
</template>
<script>
import Bar from './bar.vue'
export default{
data:{
    title:"我是标题"
},
components:{
    Bar
}
</script>
 
// 子组件bar.vue
<template>
  <div class="search-box">
    <div :title="title" ></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
}
</script>

子组件和父组件通讯能够通过this.$emit将艺术和多少传递给父组件。

        <!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->

小程序

父组件向子组件通讯和vue类似,但是小程序未有通过v-bind,而是径直将值赋值给一个变量,如下:

<tab-bar currentpage="index"></tab-bar> 此处, “index”正是要向子组件传递的值

1
2
3
<tab-bar currentpage="index"></tab-bar>
 
此处, “index”就是要向子组件传递的值

在子组件properties中,选择传递的值

properties: { // 弹窗标题 currentpage: { // 属性名 type: String, // 类型(必填),前段时间承担的门类包含:String, Number, Boolean, Object, Array, null(表示自便档次) value: 'index' // 属性早先值(可选),若是未钦命则会依据项目采纳二个 } }

1
2
3
4
5
6
7
properties: {
    // 弹窗标题
    currentpage: {            // 属性名
      type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: 'index'     // 属性初始值(可选),如果未指定则会根据类型选择一个
    }
  }

子组件向父组件通讯和vue也很左近,代码如下:

//子组件中 methods: { // 传递给父组件 cancelBut: function (e卡塔尔(英语:State of Qatar) { var that = this; var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象,提供给事件监听函数 this.triggerEvent('myevent', my伊芙ntDetail卡塔尔 //myevent自定义名称事件,父组件中应用 }, } //父组件中 <bar bind:myevent="toggleToast"></bar> // 获取子组件音信toggleToast(e卡塔尔{ console.log(e.detail卡塔尔(قطر‎ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//子组件中
methods: {  
    // 传递给父组件
    cancelBut: function (e) {
      var that = this;
      var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象,提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件,父组件中使用
    },
}
 
//父组件中
<bar bind:myevent="toggleToast"></bar>
 
// 获取子组件信息
toggleToast(e){
    console.log(e.detail)
}

        <Hello :message="msg" :name="name" :user="user"></Hello>

借使父组件想要调用子组件的艺术

vue会给子组件增多二个ref属性,通过this.$refs.ref的值便能够赢获得该子组件,然后便得以调用子组件中的任性方法,举例:

//子组件 <bar ref="bar"></bar> //父组件 this.$ref.bar.子组件的措施

1
2
3
4
5
//子组件
<bar ref="bar"></bar>
 
//父组件
this.$ref.bar.子组件的方法

小程序是给子组件增多id或者class,然后经过this.selectComponent找到子组件,然后再调用子组件的点子,示例:

//子组件 <bar id="bar"></bar> // 父组件 this.selectComponent('#id').syaHello()

1
2
3
4
5
//子组件
<bar id="bar"></bar>
 
// 父组件
this.selectComponent('#id').syaHello()

小程序和vue在这里点上太相似了,有木有。。。
图片 6

 

    </div>

九、废话

还会有许多地点没写,之后再稳步加上、精短。感到本身写的略微冗余,大佬勿喷!!!
要是感觉有救助,希望扶植点个赞和收藏

图片 7

1 赞 2 收藏 评论

图片 8

</template>

<script>

// 引入 Hello 组件

import Hello from './assets/components/Hello.vue'

export default {

  data(){

    return {

      msg:'父组件',

      name:'tom',

      age:'22',

      user:{

        id:1234,

        userName:'Jack'

      }

    }

  },

  // 注册 Hello 组件

  components:{

    Hello

  }

}

</script>

Hello.vue 文件中写入

<template>

    <div class="hello">

        <h3>我是 hello 子组件</h3>

        <!-- 在页面中一贯渲染就可以 -->

        <h4>访谈父组件中的数据: {{message}},{{name}},{{user.id}}</h4>

    </div>

</template>

<script>

export default {

    // 2. 在子组件内部,使用 props 选项证明获得的数量,即抽出来自父组件中的数据

    props:['message','name','user']

}

</script>

最终效果:

图片 9

得逞访谈到父组件的多寡

方法二 :为组件的 prop 内定 验证 法则,借使传入的数码不相符必要,Vue 会发出警示

父组件在调用子组件时,绑定想要获取的父组件中的数据

在 props 内以目的的款式写入校验法规

App.vue 中写入

<template>

    <div class="hello">

        <h3>我是 App 父组件</h3>

        <h4>访问本人的数据:{{msg}},{{name}},{{user.id}}</h4>

        <hr>

        <!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->

        <Hello :message="msg" :name="name" :age="age"  :user="user" :money="money"></Hello>

    </div>

</template>

<script>

// 引入 Hello 组件

import Hello from './assets/components/Hello.vue'

export default {

  data(){

    return {

      msg:'父组件',

      name:'tom',

      age:'22',

      user:{

        id:9876,

        userName:'Jack'

      },

      money:'123'

    }

  },

  // 注册 Hello 组件

  components:{

    Hello

  }

}

</script>

Hello.vue 中写入

<template>

    <div class="hello">

        <h3>我是 hello 子组件</h3>

        <!-- 在页面中央政府机关接渲染就能够 -->

        <h4>访问父组件中的数据:

            {{message}} <br>

            {{name}}<br>

            {{user.id}}<br>

            {{user.userName}}<br>

            {{age}}<br>

            {{ageOne}}<br>

            {{money}}<br>

        </h4>

    </div>

</template>

<script>

export default {

    props:{

        // 底蕴项目检查实验 (`null` 指允许别的类型卡塔尔国

        message:String,

        // 或许是各个类型

        name:[String,Number],

        // 必传且是字符串

        age:{

            type:String,

            required:true

        },

        // 数值且有私下认可值  如若父组件中从未该数量绑定,显示以下的默许值

        ageOne:{

            type: Number,

            default: 10

        },

        // 数组/对象的暗中认可值应当由一个工厂函数重回

        user:{

            type:Object,

            default:function(){

                return {

                    userName: 'Doctor'

                }

            }

        },

        // 自定义表达函数

        money:{

            validator:function(value){

                return value > 100

            }

        }

    }

}

</script>

功能如下

图片 10

留心:Prop 是单向绑定的:当父组件的品质变化时,将传输给子组件,可是转头不会。那是为了幸免子组件无意间改良了父组件的事态,来制止采取的多寡流变得难以精晓。

别的,每趟父组件更新时,子组件的装有 prop 都会更新为流行值。那意味着你不该在子组件内部改造 prop。

二、父组件访谈子组件的数目

在子组件中动用 $emit(事件名,数据卡塔尔 触发三个自定义事件发送数据

在父组件在使用子组件的价签内监听子组件的触发事件,并在父组件中定义方法用来获取数据

在 Hello.vue 中写入

<template>

    <div class="hello">

        <h3>我是 hello 子组件</h3>

        <h4>访谈本人的数据:

            {{msg}} <br>

            {{name}}

        </h4>

        <!-- 触发 send 事件 ,发送数据 -->

        <button @click="send">将子组件中的数据发送给父组件</button>

    </div>

</template>

<script>

export default {

    data(){

        return {

            msg:'子组件',

            name:'tom'

        }

    },

    methods:{

        // 在那定义事件,用来发送数据,也可径直写到 mounted 内自动发送

        send(){

            // 此处的 this 表示当前子组件的实例

            this.$emit('hello',this.msg,this.name)

        }

    }

}

</script>

在 App.vue 中写入

<template>

    <div class="hello">

        <h3>我是 App 父组件</h3>

        <!-- 6. 在页面中渲染 -->

        <h4>访谈子组件的多寡:{{msg}},{{name}}</h4>

        <hr>

        <!-- 子组件 -->

        <!-- 3. 在子组件标签内监听子组件事件的触发 -->

        <Hello @hello="getData"></Hello>

    </div>

</template>

<script>

// 引入 Hello 组件

import Hello from './assets/components/Hello.vue'

export default {

  data(){

    return {

      // 4. 开始化数据对象

      msg:'',

      name:'',

    }

  },

  methods:{

    // 5. 选取子组件传过来的数目

    getData(msg,name){

      this.msg = msg,

      this.name = name

    }

  },

  // 注册 Hello 组件

  components:{

    Hello

  }

}

</script>

效果图:

图片 11

        总来讲之,作为叁个程序猿,我们要不停抓实自个儿的职业知识素养,学习更新的事物,这样大家本领使本人更压实硬。

本文由IT-综合发布,转载请注明来源:Vue和微信小程序的区别,vue父子组件间传值