1.父组件把方法传递给了子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
<h3>你选择的学校是：{{chooseSchool}}</h3>
</ul>
</div>
<script>
Vue.component("school", {
props: ['schoolName', 'index', 'action'],
template: `
<li>
<h3>{{index}}-学校名称：{{schoolName}}</h3>
<button @click="chooseEvent(schoolName)">选择学校</button>
</li>
`,
methods: {
//把参数传给父组件
chooseEvent: function (schoolName) {
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>
-
changeEvent可以改变chooseSchool的值，不知道哪个子组件调用，也不知道子组件的值是多少？
-
我们在组件中定义一个方法！这个方法写在组件的methods里面。
<button @click="chooseEvent(schoolName)">选择学校</button>
- 我们在methods方法调用参数里面的action,来把子组件数值传给父组件
methods: {
//把参数传给父组件
chooseEvent: function (schoolName) {
this.action(schoolName)
}
}
-
所以必须在参数列表props中定义一个action
props: ['schoolName', 'index', 'action'], -
然后在school标签中把action绑定父组件app中的changeEvent方法
:action="changeEvent"
2.更简单的方法$parent
直接在子组件通过this.$parent.changeEvent(schoolName)来调用
1.通过$parent来调用父组件，可以获取父组件的方法，属性等全部数据
2.当操作逻辑简单的时候，就可以直接用$parent.方法
也可以使用$parent.属性来使用
<button @click="$parent.chooseSchool=schoolName">选择学校</button>
<button @click="$parent.changeEvent(schoolName)">选择学校</button>
<button @click="$root.changeEvent(schoolName)">选择学校</button>
但是不推荐这么写，这样写的耦合程度太高了
3.获取当前组件的根组件$root
建议使用props属性来修改，这样可以减少耦合，不推荐这种直接修改的方法