2022-06-18 2 分钟 0.3 k0次访问

Vue组件传值ref和props

ref

父组件获取子组件的属性和方法：

父组件

<Son ref="son"></Son>

<script>
    //获取ref为user的子组件的data值,属性为msg
	let data = this.$refs.son.msg;
    //调用ref为user的子组件的open方法
    let method = this.$refs.son.open();
</script>

子组件Son

data() {
    return{
        msg: 'hello lvjie'
    }
},
methods:{
    open(){
        console.log('this is a open method')
    }
}

props

父组件向子组件传值

父组件

<!--
父传子属性：sun对应当前的data属性，sunny可随便取，对应子组件的props属性
父传子方法：save对应当前的save方法，saveToUser是对应子组件的props方法
-->
<h1>父组件</h1>
<Son :sunny="sun" :saveToUser="save"></Son>

<script>
    export default {
        data(){
            return{
                sun: [
                    {name: 'lvjie'},
                    {name: 'hello'}
                ]
            }
        },
        methods:{
            save(){
                console.log("保存内容：父传子方法")
            }
        }
    }
</script>

子组件Son

<h1>子组件</h1>
<li v-for="son in sunny">
	<h2>{{son.name}}</h2>
    <button @click="saveToUser">输出保存内容</button>
</li>

<script>
    export default {
        props:{
            sunny:{
                type:Array,
                default:()=>{}
            },
            saveToUser:{
                type:Function,
                default:()=>{}
            }
        },
        data(){
            return{
            }
        }
    }
</script>

子组件向父组件传值

子组件Son

<h1>子组件</h1>
<h1 @click="change()">{{title}}</h1>

<script>
    export default {
        methods:{
            change(){
                //注册事件：titleChanged表示事件方法名称，对应父组件中的自定义方法名称。后面是传入的内容，相当于形参
                this.$emit('titleChanged','lvjie')
            }
        }
    }
</script>

父组件

<h1>父组件</h1>
<son :titleChanged="updateTitle($event)"></son>
{{title}}

<script>
	export default {
        data(){
            return{
                title: "原标题"
            }
        }
        methods:{
            updateTitle(el){
                this.titile = el;
            }
        }
    }
</script>