vue父子传值以及监听这个值,把值拿到子组件使用不报警告

Posted GGbondMan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue父子传值以及监听这个值,把值拿到子组件使用不报警告相关的知识,希望对你有一定的参考价值。

1,父组件给到一个值,然后在子组件的标签里面用   :传变量 = 父变量

你的子组件记得注册

 

 1 <template>
 2     <div>
 3        <h1>我是父组件,我有一个数字:<span style="color:orange">{{num}}</span> 给儿子</h1>
 4        <Son :message="num"></Son>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 import Son from ./son
10 export default {
11     data () {
12         return {
13             num:123
14         }
15     },
16     components: {
17         Son
18     }
19 }
20 </script>

 

 

2,子组件呢,用一个props去接收父组件的值,然后具体格式看代码

 1 <template>
 2     <div>
 3         我是son组件,父亲给了我:{{message}}
 4         <button @click="handleClick">点击显示</button>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10     data () {
11         return {
12             list:this.message
13         }
14     },
15     props:["message"],
16     // props: {
17     //     message: {
18     //         type: String,                 //可指定接收类型,如:Array.
19     //         default:"this is default"     //可设置默认值
20     //     }
21     // },
22     created () {
23         console.log(this.message)
24     },
25     methods: {
26         handleClick(){
27             console.log(++this.list)
28         }
29     },
30     watch: {
31         "message":function(val){
32             this.data=val
33         }
34     }
35 }
36 
37 </script>

我在这里呢,想用这个值,但是报一个警告,因为不能直接使用,所以把他赋给了list。

但是怕传来的值发生改变怎么办?所以我给了初始值一个监听,更新初始值。

 

以上是关于vue父子传值以及监听这个值,把值拿到子组件使用不报警告的主要内容,如果未能解决你的问题,请参考以下文章

Vue父子传值使用监听

Vue父子组件通信之$emit(基于vue2.5,ES6)

Vue3---父子组件间互相传值

vue中父组件如何监听子组件值的变化

vue的父子组件间传值以及非父子间传值

vue父子组件数据传输以及实现父子组件数据双向绑定