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

Posted 2021-03-01 GGbondMan

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。

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