1.父组件向子组件传参
1)这是一个父组件
//这是一个父组件
<div>
<port :port-List="portList" ></port>
</div>
//port 这是子组件的名称
export default{
components: {
},
props: {
},
data() {
return{
portList:'',
}
},
computed: {
},
mounted() {
},
watch: {
},
methods:{
queryPort(){
this.portList='1';
}
}
2.这是一个子组件
//这是一个子组件
<div>
</div>
export default{
components: {
},
props: ['portList'],
data() {
return{
}
},
computed: {
},
mounted() {
console.log("3",this.portList)//在子组件知道父组件值得方法就是this.
},
watch: {//这里可以监听父组件值的变化,一旦变化就会去执行this.queryPort方法把变化的值打印
portList(val){
this.queryPort(val)
}
},
methods:{
queryPort(value){
console.log("3",value)
}
}
2.子组件向父组件传参
1.父组件
//这是一个父组件
<div>
<port :port-List="portList" @hand-association="association"></port>
</div>
//port 这是子组件的名称
export default{
components: {
},
props: {
},
data() {
return{
portList:'',
}
},
computed: {
},
mounted() {
},
watch: {
},
methods:{
queryPort(){
this.portList='1';
}
association(row){
console.log("1",row)
}
}
2.子组件
//这是一个子组件
<div @click="handAssociation>
</div>
export default{
components: {
},
props: ['portList'],
data() {
return{
}
},
computed: {
},
mounted() {
console.log("3",this.portList)//在子组件知道父组件值的方法就是this.
},
watch: {//这里可以监听父组件值的变化,一旦变化就会去执行this.queryPort方法把变化的值打印
portList(val){
this.queryPort(val)
}
},
methods:{
queryPort(value){
console.log("3",value);
}
handAssociation(){
this.$emit("hand-association",selectRow);
},
}