vue学习1之组件传递

lotSeed_5

于 2018-04-08 10:31:41 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/qq_41854017/article/details/79848498

版权

子传父；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="counter-event-example">
    <div>
        sync修饰符的使用
    </div>
    <!--
    :foo.sync="bar"扩展为如下：
    <comp :foo="bar" @update:foo="val => bar = val"></comp>

    <!--&ndash;&gt; -->

    <comp :foo.sync='bar'></comp>
    <span>绑定bar值为--{{bar}}</span>
    <br><br><br>
    <div>组件子向父组件传参---在表单输入点击sendd</div>
    <span>{{total}}</span>
    <button-counter @child-info="get"></button-counter>
    <br><br><br>
    <div>组件子向父组件传参---native原生操作</div>
    <span>{{total}}</span>
    <button-counter @clild-info="get" v-on:click.native='doTheThing'></button-counter>
    <!--<span>{{num}}</span>-->
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/974aa47f8f9c5361c5233bd56be37db8ed765a09/currency-validator.js"></script>

<script>
    Vue.component('button-counter',{
        template:"<div><input type='text' v-model='ceshi'><button @click='send'>send1</button></div>",
        data:function () {
            return{
                ceshi:''
            }
        },
        methods:{
            send:function () {
                this.$emit('child-info',this.ceshi)
            }
        }
    })
    Vue.component('comp',{
        props:['foo'],
        template:"<div>{{foo}}<button @click='send'>点击foo</button></div>",
        data:function () {
            return {
                fa:''
            }
        },
        methods:{
            send:function(){
                this.$emit('update:foo','ee')
            //    this.$emit('child-info',this.ceshi)
            }
        }
    })
    var aa = new Vue({
        el:'#counter-event-example',
        data:{
            total:'',
            bar:'aa'
        },
        methods:{
            get:function (msg) {
                this.total = msg;
                alert(this.total)
            },
            doTheThing:function () {
                alert("这是原生的事件啊 啊")
            }
        }
    })
</script>
</body>
</html>

父传子：

ps:App.vue 父组件
　 Hello.vue 子组件
App.vue :
<template>
<div id="app">
<input type="button" name="" id="" @click="parentCall" value="父调子" />
<hello ref="chil" />
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
　　parentCall () {
　　　　this.$refs.chil.chilFn('我是父元素传过来的')
　　}
}
}
</script>
Hello.vue :
<template>
<div class="hello">
　　
</div>
</div>
</template>
<script>
export default {
name: 'hello',
'methods': {
　　chilFn (msg) {
　　　　alert(msg)
　　}
}
}
</script>

lotSeed_5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习1之组件传递

子传父；&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, init
复制链接

扫一扫