459 vue使用$root$parent$children进行父子组件通信

Posted jianjie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了459 vue使用$root$parent$children进行父子组件通信相关的知识,希望对你有一定的参考价值。

父元素方法传值给子元素.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 从父组件传值到子组件 -->
            <!-- 循环传值组件 -->

            <!-- 
				 因为父元素的方法可以直接修改父元素的数据
				 所以将父元素的方法传递给子元素,
				 然后由子元素进行调用,从而修改父元素的数据
			-->
            <school v-for="item,index in schoolList" :action=‘changeEvent‘ :key="‘abc‘+index" :index=‘index‘
                :school-name="item"></school>

        </ul>

        <h2>选中的学校是:{{chooseSchool}}</h2>


    </div>

    <script type="text/javascript">
        //产品组件
        Vue.component("school", {
            props: [‘schoolName‘, ‘index‘, ‘action‘],
            template: `<li>
							
							<h3>{{index}}-学校名称:{{schoolName}}</h3>
							<button @click="chooseEvent(schoolName)">选择学校</button>
							
						</li>`,
            methods: {
                chooseEvent: function (schoolName) {
                    console.log(schoolName)
                    //console.log(this.action)
                    console.log(this)
                    this.action(schoolName)
                }
            }

        })


        //根组件
        let app = new Vue({
            el: "#app",
            data: {
                schoolList: [‘清华‘, ‘北大‘, ‘浙大‘, "中大"],
                chooseSchool: ""
            },
            methods: {
                changeEvent: function (data) {
                    //console.log("触发学校选择事件")
                    console.log(this)
                    this.chooseSchool = data
                }
            }
        })


    </script>
</body>

</html>

通过父元素数据直接修改.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 从父组件传值到子组件 -->

            <!-- 循环传值组件 -->

            <!-- 
				 因为父元素的方法可以直接修改父元素的数据
				 所以将父元素的方法传递给子元素,
				 然后由子元素进行调用,从而修改父元素的数据
				 -->
            <school v-for="item,index in schoolList" :key="‘abc‘+index" :index=‘index‘ :school-name="item"></school>

        </ul>

        <h2>选中的学校是:{{chooseSchool}}</h2>


    </div>

    <script type="text/javascript">
        //产品组件
        Vue.component("school", {
            props: [‘schoolName‘, ‘index‘, ‘action‘],
            //在视图直接调用父元素方法
            template: `<li>
                <h3>{{index}}-学校名称:{{schoolName}}</h3>
                <button @click="$parent.chooseSchool = schoolName">选择学校</button>
            </li>`,
            methods: {
                chooseEvent:function(schoolName){
                	console.log(schoolName)
                	console.log(this)
                	// 组件可以通过$parent属性找到父元素的vue对象
                	this.$parent.changeEvent(schoolName)
                }
            }
        })


        //根组件
        let app = new Vue({
            el: "#app",
            data: {
                schoolList: [‘清华‘, ‘北大‘, ‘浙大‘, "中大"],
                chooseSchool: ""
            },
            methods: {
                changeEvent: function (data) {
                    //console.log("触发学校选择事件")
                    console.log(this)
                    this.chooseSchool = data
                }
            }
        })


    </script>
</body>

</html>

子元素通过调用$parent属性的方法修改父元素的内容.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 从父组件传值到子组件 -->
            <!-- 循环传值组件 -->

            <!-- 
				 因为父元素的方法可以直接修改父元素的数据
				 所以将父元素的方法传递给子元素,
				 然后由子元素进行调用,从而修改父元素的数据
				 -->
            <school v-for="item,index in schoolList" :key="‘abc‘+index" :index=‘index‘ :school-name="item"></school>

        </ul>

        <h2>选中的学校是:{{chooseSchool}}</h2>


    </div>

    <script type="text/javascript">
        //产品组件
        Vue.component("school", {
            props: [‘schoolName‘, ‘index‘, ‘action‘],
            template: `<li>
                <h3>{{index}}-学校名称:{{schoolName}}</h3>
                <button @click="chooseEvent(schoolName)">选择学校</button>
            </li>`,
            methods: {
                chooseEvent: function (schoolName) {
                    console.log(schoolName)
                    console.log(this)
                    //组件可以通过$parent属性找到父元素的vue对象
                    this.$parent.changeEvent(schoolName)
                }
            }
        })


        //根组件
        let app = new Vue({
            el: "#app",
            data: {
                schoolList: [‘清华‘, ‘北大‘, ‘浙大‘, "中大"],
                chooseSchool: ""
            },
            methods: {
                changeEvent: function (data) {
                    //console.log("触发学校选择事件")
                    console.log(this)
                    this.chooseSchool = data
                }
            }
        })
    </script>
</body>

</html>

子元素通过调用$parent属性的方法修改父元素的内容2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 从父组件传值到子组件 -->
				
				<!-- 循环传值组件 -->
				
				<!-- 
				 因为父元素的方法可以直接修改父元素的数据
				 所以将父元素的方法传递给子元素,
				 然后由子元素进行调用,从而修改父元素的数据
				 -->
				<school v-for="item,index in schoolList" :key="‘abc‘+index" :index=‘index‘ :school-name="item"></school>
				
			</ul>
			
			<h2>选中的学校是:{{chooseSchool}}</h2>
			
			
		</div>
		
		<script type="text/javascript">
			//产品组件
			Vue.component("school",{
				props:[‘schoolName‘,‘index‘,‘action‘],
				//在视图直接调用父元素方法
				template:`<li>
							<h3>{{index}}-学校名称:{{schoolName}}</h3>
							<button @click="$parent.changeEvent(schoolName)">选择学校</button>
						</li>`,
				methods:{
					// chooseEvent:function(schoolName){
					// 	console.log(schoolName)
					// 	console.log(this)
					// 	//组件可以通过$parent属性找到父元素的vue对象
					// 	//this.$parent.changeEvent(schoolName)
					// }
				}
				
			})
			
			
			//根组件
			let app = new Vue({
				el:"#app",
				data:{
					schoolList:[‘清华‘,‘北大‘,‘浙大‘,"中大"],
					chooseSchool:""
				},
				methods:{
					changeEvent:function(data){
						//console.log("触发学校选择事件")
						console.log(this)
						this.chooseSchool = data
					}
				}
			})
			
			
		</script>
	</body>
</html>

以上是关于459 vue使用$root$parent$children进行父子组件通信的主要内容,如果未能解决你的问题,请参考以下文章

使用 this.$parent.somePropOrMethod 和 this.$root.somePropOrMethod 时,类型“Vue”上不存在属性 X

vue2组件通信之$parent/$root

vue 自定义组件(二) $parent、$children、ref、refs

vue 自定义组件之父子组件

683 vue3的动态组件,keep-alive,缓存组件的生命周期,异步组件和Suspense,$refs,$parent和$root,生命周期,组件的v-model

Vue五五组件间传值props,自定义事件传参,ref属性,全局事件总线,root/parent/children方法——provide/inject配置项——$attrs/$listeners