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

2020-05-03 21:01:16 阅读：260 来源： 互联网

标签：459 vue console log parent schoolName chooseSchool action data

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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