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。

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

原文地址:https://www.cnblogs.com/GGbondLearn/p/12665748.html