首页 > 其他分享> > 459 vue使用$root、$parent、$children进行父子组件通信

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

2020-05-03 21:01:16 作者：互联网

父元素方法传值给子元素.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>

标签：459,vue,console,log,parent,schoolName,chooseSchool,action,data
来源： https://www.cnblogs.com/jianjie/p/12823405.html