Vue父子组件间传值 之 props/$emit 阳光穿透心脏的1/2处 2022-12-20 13:59 153阅读 0赞 ## 示例一:父组件向子组件传值及方法 ## * 定义父组件: <template> <div> <h2> { {msg}}</h2> <br> <v-head :title="titleText" :messgae="msg" :homeFun="homeFun" :homeComp=this></v-head> </div> </template> <script> import Head from './Head'; export default { data() { return { msg: '首页', titleText:'来自首页的数据' } }, components:{ 'v-head':Head }, methods:{ homeFun(param){ console.log("来自父组件的fun方法 "+param); } } } \- 定义子组件: <template> <div> <h2>{ {msg}}</h2> { {title}} { {messgae}} <br> <button @click="homeFun">执行父组件的方法</button><br> <button @click="homeFun('abcd')">执行父组件的方法</button><br> <button @click="getHomeComp()">获取父组件的数据和方法</button><br> </div> </template> <script> export default { data() { return { msg: '头部', } }, methods:{ getHomeComp(){ console.log(this.titleText); console.log(this.homeComp.titleText); this.homeComp.homeFun(); } }, props:['title','messgae','homeFun','homeComp'] } </script> ## 示例二:父组件向子组件传递数据 ## * 子组件Child.vue <template> <div> <h1>子组件</h1> <h3>插值表达式获取到:{ {msg1}}</h3> <h3>插值表达式获取到:{ {msg2}}</h3> <h3>插值表达式获取到:{ {msg3}}</h3> </div> </template> <script> export default { name: 'Child', props: { msg1: { type: String, default: '' }, msg2: { type: String, default: '' }, msg3: { type: String, default: '' } } } </script> * 父组件:Parent.vue <template> <div> <h1>父组件</h1> <h-child v-bind:msg1="'来自父组件的数据'" 动态绑定 :msg2="'data from parent'" 动态绑定的简写形式 msg3="'data from parent'" 绑定字符串:注意字符串用单引号括起来 ></h-child> </div> </template> <script> // 引入子组件 import HChild from './Child' export default { name: 'Parent', components: { HChild } } </script> * 结果: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center] ## 示例:子组件中单击按钮向父组件传递数据 ## * 子组件:Child.vue <template> <div> <h1>子组件</h1> <button @click="passMsg">子组件向父组件传值</button> </div> </template> <script> export default { name: 'Child', methods: { passMsg () { this.$emit('showMsgEvent', '子组件向父组件传递的值') } } } </script> * 父组件:Parent.vue <template> <div> <h1>父组件</h1> <h3>插值表达式获取到:{ {msg}}</h3> <h-child @showMsgEvent="showMsg"></h-child> <!-- 注意:和子组件方法中emit的第一个参数一致 --> </div> </template> <script> // 引入子组件 import HChild from './Child' export default { name: 'Parent', data () { return { msg: '' } }, components: { HChild }, methods: { showMsg (val) { this.msg = val } } } </script> 结果: ![在这里插入图片描述][20201120112346113.png_pic_center] 单击按钮后 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/bac836951191485ba2a7689f9f1c2e8f.png [20201120112346113.png_pic_center]: /images/20221120/db944c21b6d04205b1603bf18dd6bbc1.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/cb5f19accfac4899a53da9c6bda1909f.png
还没有评论,来说两句吧...