组件传值&数据请求

作者: 奶瓶SAMA | 来源:发表于2018-06-12 21:10 被阅读0次

vue组件间传值问题总结
组件间的通信
组件传值&数据请求
angular 1.5.8 项目回顾
Vue父子组件通信和双向绑定
vue单文件父子组件之间的通信
Vuex 数据流管理
vue 面试
组件间传值
vue零基础开发016——父子组件的数据传递

每个组件的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现

组件传值可以分为以下三类

父组件向子组件传递数据
子组件向父组件传递数据
非父子组件之间的数据传递

父传子 – 简化版

函数式组件传值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root" class="parent">
            
        </div>
        

        
    </body>

</html>
<script type="text/babel">

    // 创建一个函数组件  ---- 使用props完成值得接收
    function Child(props){
        return (
            <div>
                <ul>
                    <li>{props.name}</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        )
    }


    ReactDOM.render(
        // 渲染组件  并通过name属性完成传值
        <Child name="3"></Child>, 
        document.getElementById('root') 
    );

</script>

类组件传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        

        
    </body>

</html>
<script type="text/babel">

    // 创建一个类组件
    class Child extends React.Component{
        render(){
            return (
                <div>
                    <ul>
                        <li>{this.props.name}</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            )
        }
    }


    ReactDOM.render(
        <Child name="1"></Child>, 
        document.getElementById('root') 
    );

</script>

父传子 – 完整版

函数式组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        

        
    </body>

</html>
<!--
    
    组件：组成的部件,可以接受任何props输入,并返回元素
    
-->
<script type="text/babel">

    // 创建一个父组件 
    function Parent(){
        return (
            <div>
                <h1>这是父组件</h1>
                {/*在父组件中嵌套子组件*/}
                <Child name="1"></Child>
            </div>
        )
    }
    
    // 创建一个子组件 列表
    function Child(props){
        return (
            <div>
                <h3>这是子组件</h3>
                <ul>
                    <li>{props.name}</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        )
    }

    // 2. 组件的使用
    ReactDOM.render(
        <Parent></Parent>, 
        document.getElementById('root') 
    );

</script>

类组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        

        
    </body>

</html>
<script type="text/babel">

    // 创建一个类组件  -- 父
    class Parent extends React.Component{
        render(){
            return (
                <div>
                    <h1>这是父组件</h1>
                    {/*在父组件中嵌套子组件*/}
                    <Child name="1"></Child>
                </div>
            )
        }
    }

    
    // 创建一个类组件  -- 子
    class Child extends React.Component{
        render(){
            return (
                <div>
                    <h3>这是子组件</h3>
                    <ul>
                        <li>{this.props.name}</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            )
        }
    }
    


    ReactDOM.render(
        <Parent></Parent>, 
        document.getElementById('root') 
    );

</script>

子传父

函数式组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    //子组件
    function Child(props){
            return (
                <div>
                    {/*当文本框内容发生变化的时候.会执行父组件里面的事件*/}
                     子组件：<input onChange={props.handleEmail}/>
                </div>
           )
    }
    
    //父组件
    function Parent() {
        
        return (
            <div>
                <div id='div'>父组件：{1}</div>
                <Child name="email" handleEmail={
                    function (event){
                        /*获取子组件的数据*/
                        console.log(event.target.value)
                        
                        document.getElementById('div') = event.target.value
                        
                    }
                }/>
            </div>
        )
    }
    
    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

</script>

类组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    //子组件
    class Child extends React.Component{

        render(){
            return (
                <div>
                    {/*当文本框内容发生变化的时候.会执行父组件里面的事件*/}
                     子组件：<input onChange={this.props.handleEmail}/>
                </div>
            )
        }
    }
    
    //父组件
    class Parent extends React.Component{

        constructor(props){
            super(props)
            this.state = {
                email:''
            }
        }
        handleEmail(event){
            this.setState({email: event.target.value});
        }
        
        
        
        render(){
            return (
                <div>
                    <div>父组件：{this.state.email}</div>
                    <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
                </div>
            )
        }
    }
    
    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

</script>

非父子

非父子组件传值之兄弟组件传值

使用中间人模式 , 定义一个公共的父组件来实现兄弟组件之间的数据传递

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        

    </body>

</html>
<script type="text/babel">
    
    
    class Brother1 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }
      
      render(){
        return (
          <div>
            <button onClick={this.props.refresh}>
                更新兄弟组件
            </button>
          </div>
        )
      }
    }
    
    class Brother2 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }
      
      render(){
        return (
          <div>
             {this.props.text || "兄弟组件未更新"}
          </div>
        )
      }
    }
    
    class Parent extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }
      
      refresh(){
        return (e)=>{
          this.setState({
            text: "兄弟组件沟通成功",
          })
        }
      }
      
      render(){
        return (
          <div>
            <h2>兄弟组件沟通</h2>
            <Brother1 refresh={this.refresh()}/>
            <Brother2 text={this.state.text}/>
          </div>
        )
      }
    }

    ReactDOM.render(<Parent />, document.getElementById('root'));

</script>

组件的嵌套

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        
        
    </body>

</html>
<!--
    
    组件：组成的部件,可以接受任何props输入,并返回元素
    
-->
<script type="text/babel">

    // 1.1 创建一个基本的组件
    function Welcome(props){
        return (
            <div>
                <p>{props.name}</p>
            </div>
        )
    }
    
    
    // 1.2 创建一个app组件,并使用Welcome组件
    function App(props){
        return (
            <div>
                <Welcome name="1"></Welcome>
                <Welcome name="2"></Welcome>
                <Welcome name="3"></Welcome>
            </div>
        )
    }

    var element = <App></App>
    // 2. 组件的使用
    ReactDOM.render(
        element, 
        document.getElementById('root') 
    );

</script>

props总结

props是只读的

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

get请求

数据请求

静态数据

最初的时候, 渲染页面 , 数据都是写在本页面

这样操作的问题是修改页面内容不方便, 只能通过操作本页面完成

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    

    
    class Fetch_get extends React.Component{
        
        constructor(props){
            super(props)
            this.state = {
                arr:[
                    {"id":"123001","name":"xiaoming"},
                    {"id":"123002","name":"xiaobing"},
                    {"id":"123003","name":"xiaona"}
                ]
            }
        }
        
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        
    }
    
    
    

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

请求json文件,完成页面的渲染

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    

    
    class Fetch_get extends React.Component{
        
        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }
        
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        
        componentDidMount(){
            
            var url = "data.json"
            
            var option = {
                methods:"get"
            }
            
            fetch(url,option).then((res)=>{
                return res.json()
            }).then((res)=>{
                // 请求到的数据
                console.log(res)
                
                // 修改state
                this.setState({
                    arr:res
                })
                
                // 打印输出 
                console.log(this.state.arr)
                
            })
            
        }
        
    }
    
    
    

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

在线接口

书写数据接口, 通过后台操作, 读取数据库数据, 并做成接口的形式, 我们需要对数据进行操作的时候,直接操作接口即可

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    
    [{"id":"123001","name":"xiaoming"},{"id":"123002","name":"xiaobing"},{"id":"123003","name":"xiaona"}]
    
    class Fetch_get extends React.Component{
        
        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }
        
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        
        componentDidMount(){
            
            var url = "http://www.taoquan.store/robot/getUsers.php"
            
            var option = {
                methods:"get"
            }
            
            fetch(url,option).then((res)=>{
                return res.json()
            }).then((res)=>{
                // 请求到的数据
                console.log(res.users)
                
                // 修改state
                this.setState({
                    arr:res.users
                })
                
                // 打印输出 
                console.log(this.state.arr)
                
            })
            
        }
        
    }

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

文件上传

Content-Type：上传文件的时候，一定要设置为application/x-www-form-urlencoded

跨域

fetch跨域概述

在fetch的配置中有 mode选项 , 提供了跨域的能力

mode: ‘cors’, // no-cors, cors, *same-origin
mode:’cors’
- 这个选项提供了跨域的能力, 但是服务端必须支持 cors ,也就是设置 res.header(“Access-Control-Allow-Origin”, “*”);
mode:’no-cors’
- 可以跨域进行数据请求 , 不需要设置跨域 header
- 在该模式下得到的返回数据中 type为opaque。, 能够在控制台看到返回的数据, 但是没有权限使用这些数据
mode:”same-origin”
- 同源, 不允许跨域

并不能成功跨域进行数据的访问

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    
    
    class Fetch_get extends React.Component{
        
        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }
        
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        
        componentDidMount(){
            
             var url = "https://api.douban.com/v2/movie/top250"
            // var url = 'http://127.0.0.1:8899/api/selectData'
            var option = {
                methods:"get",
                mode:'no-cors'
            }
            
            fetch(url,option).then((res)=>{
                console.log(res)
            })
            
        }
        
    }
    
    
    

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

关于跨域的三种方式

第一种方式

利用script标签的跨域访问特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域2</title>
</head>
<body>
</body>

</html>
<!--代码的先后顺序 不能变-->
<script type="text/javascript">
    function fn(response){
            console.log(response);
    }
</script>
<script src="https://api.douban.com/v2/movie/top250?callback=fn"></script>

第二种方式

动态创建script标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域2</title>
</head>
<body>
</body>

</html>
<!--代码的先后顺序 不能变-->
<script type="text/javascript">
    function fn(response){
            console.log(response);
    }
    
    var script = document.createElement('script')
    
    script.src = 'https://api.douban.com/v2/movie/top250?callback=fn'
    
    document.body.insertBefore(script, document.body.firstChild);   
    
</script>

第三种方式

使用jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    
    
    $.ajax({
        type:'get',
        url:"https://api.douban.com/v2/movie/top250?callback=?",
        success(res){
            console.log(res)
        },
        dataType:"jsonp"
    })
    
    
</script>

vue组件间传值问题总结
vue项目中，组件间传值的问题总结：父传子父组件子组件上面父组件和子组件之间的传值是模拟接口请求数据，然后...
组件间的通信
一、父组件往子传值父子组件传值，异步请求有可能渲染时报错异步请求时，数据还没有获取到但是此时已经渲染节点了。应该...
组件传值&数据请求
每个组件的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现组件传值可以分为...
angular 1.5.8 项目回顾
父子组件传值需求：父组件请求接口获取初始数据data 通过binding(<)单向传递给子组件子组件在cli...
Vue父子组件通信和双向绑定
本篇文章主要介绍父子组件传值，组件的数据双向绑定。 1. 基础父子组件传值父子组件传值，这是Vue组件传值最常见...
vue单文件父子组件之间的通信
主要笔记内容：父组件向子组件传值；子组件向父组件传值；一、父组件向子组件传值：步骤：1、父组件向下传递数据...
Vuex 数据流管理
组件通讯父子组件传值通过 props 向子组件传递数据 Parent Child 子父组件传值通过监听子组件...
vue 面试
组件之间的传值？ 1.父组件与子组件传值父组件通过标签上面定义传值子组件通过props方法接受数据 2.子组件向...
组件间传值
父子组件传值父传子 // 接收父组件传值子传父 // 触发一个自定义事件祖孙组件传值// 添加依赖数据，它里面...
vue零基础开发016——父子组件的数据传递
父组件通过属性向子组件传值，子组件通过事件触发向父组件传值；单项数据流：父组件可以向子组件传递任何数据，子组件不能...

组件传值&数据请求

每个组件的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现

父传子 – 简化版

父传子 – 完整版

函数式组件

子传父

函数式组件

非父子

props总结

get请求

数据请求

文件上传

跨域

fetch跨域概述

关于跨域的三种方式

相关文章

vue组件间传值问题总结

组件间的通信

组件传值&数据请求

angular 1.5.8 项目回顾

Vue父子组件通信和双向绑定

vue单文件父子组件之间的通信

Vuex 数据流管理

vue 面试

组件间传值

vue零基础开发016——父子组件的数据传递

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

组件传值&数据请求

每个组件 的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现

父传子 – 简化版

父传子 – 完整版

函数式组件

子传父

函数式组件

非父子

props总结

get请求

数据请求

文件上传

跨域

fetch跨域概述

关于跨域的三种方式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

每个组件的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现