vue组件通讯-父传子

最新推荐文章于 2023-05-12 15:25:36 发布

开心怪兽

最新推荐文章于 2023-05-12 15:25:36 发布

阅读量256

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45765548/article/details/118278672

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

父组件向子组件传值(包括函数)
	 1.组件内部通过props接收传递过来的值；
	 2.父组件通过属性将值传递给子组件；
可以在子组件中对父组件传递过来的数据进行操作，但不推荐 vue会给出warn警告。
	  因为props数据传递原则：单向数据流。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <!-- 用v-bind绑定props属性,数值和布尔类型的数据可以得到其对应类型，进行使用 -->
        <menu-item :title="pmsg" :change="handleChange"></menu-item>


    </div>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        // 父组件向子组件传值
        Vue.component('menu-item', {
            props: {
                title: String,
                /*
                title:{
                	type:String,
                	require:true,
          			}或
          		title:{
	          		validator (value){
	                		return typeof value ==="String";
	                	}
                	}
                	*/
                change: Function,
                
            },
            data: function() {
                return {
                    msg: '子组件本身的数据'
                }
            },
            template: `<div>
				<p>{{msg+"---"+title}}</p>
				<button @click="change">点击</button>
				</div>`
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中的内容',
                ptitle: '动态绑定属性'
            },
            methods: {
                handleChange() {
                    this.pmsg = "调用handleChange方法，父组件中内容被改变"
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述
点击后，子组件内调用父组件方法，改变父组件内pmsg变量的值。

开心怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件通讯-父传子

父组件向子组件传值(包括函数) 1.组件内部通过props接收传递过来的值； 2.父组件通过属性将值传递给子组件；可以在子组件中对父组件传递过来的数据进行操作，但不推荐 vue会给出warn警告。因为props数据传递原则：单向数据流。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head>
复制链接

扫一扫